CSS3 background屬性

時間 2019-11-08

原文原文鏈接

屬性	示例	備註
背景顏色	background-color: red;
背景圖片	background-image: url(iamges/***.jpg);
背景平鋪	background-repeat: repeat-x;background-repeat: repeat-x;	-x:橫向平鋪；-y:縱向平鋪；no-repeat爲取消平鋪
背景圖片位置(一)	background-position: left top; background-position: right bottom; background-position: center;	分別爲左上、右下、居中，若只寫一個屬性則另外一個默認爲center
背景圖片位置(二)	background-position: 10px 30px;	第一個值爲水平座標，第二個值爲縱向座標
背景圖片位置(三)：混搭	background-position: 10px center;	橫向10px，縱向居中
背景附着	background-attachment: scroll / fixed;	默認是scroll
背景縮放（一）	background-size: 50%; background-size: 100px 200px;	縮放爲原來一半大小；寬100px，高200px，儘可能只改一個值，防止圖片失真
背景縮放（二）	background-size: cover / contain;	cover：會自動調整縮放比列，保證圖片始終填充滿背景區域，移出部分會被隱藏;contain:自動調整縮放比例，保證圖片完整顯示，但背景可能會有部分裸露

簡寫方式:background: 顏色圖片平鋪附着位置html

<style>
	body{
		background: #000 url(img/xxx.jpg) no-repeat fixed center -25px;
	}
</style>
複製代碼

凹凸文字效果url

<body>
   <div>我是凸起的文字</div>
   <div>我是凹下的文字</div>
</body>
<style> body { background-color: #ccc; } div { color: #ccc; font: 700 80px "微軟雅黑"; } div:first-child { text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff; } div:last-child { text-shadow: -1px -1px 1px #000,1px 1px 1px #fff; } </style>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。