商城网站建设报价表,潜江建设局网站,php网站开发系统,手机网站页面范例background属性为元素添加背景效果。
它是以下属性的简写#xff0c;按顺序为#xff1a;
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
以下所有示例中的花花.jpg图片的大小是4848。 1 background-color
background-col…background属性为元素添加背景效果。
它是以下属性的简写按顺序为
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
以下所有示例中的花花.jpg图片的大小是48×48。 1 background-color
background-color指定元素的背景色。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS 背景色 Demo/titlestylebody {margin: 0;padding: 0;}.container {width: 200px;height: 200px;background-color: #f0f0f0;}.box {width: 100px;height: 100px;background-color: #f00;}/style
/head
bodydiv classcontainerdiv classbox/div/div
/body
/html2 background-image
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS 背景图片 Demo/titlestylebody {margin: 0;padding: 0;}.bg {width: 96px;height: 96px;background-image: url(./花花.png)}/style
/headbodydiv classbg/div
/body/html背景图片默认是重复的repeat。 3 background-repeat
它具有以下值。
1默认值repeat
repeat会裁剪重复图片超出的部分。
.bg{width: 120px;height: 96px;background-repeat:repeat;
}2space
space是无裁剪的重复。
其重复原理
如果图片不能刚好放下剩余长或宽将均匀分布在图片之间。第一张图片一定从左上方的顶点位置开始排列。如果图片大小超出容器大小那么将被裁剪。
.bg{width: 120px;height: 96px;background-repeat:space;
}.bg{width: 160px;height: 96px;background-repeat:space;
}3round
round是自适应重复相比较于space它会根据元素与图片的大小关系拉伸或缩小图片。
比如说一个图片长为 x x x元素长为 X X X n x ≤ X ≤ m x nx \leq X \leq mx nx≤X≤mx如果 X X X更靠近 n x nx nx那么图片将被放大如果 X X X更靠近 m x mx mx那么图片将被缩小。
4no-repeat
no-repeat设置图片不允许重复。 4 background-attachment
background-attachment决定图片的滚动行为。
其值包括
scroll默认值背景图片随页面滚动而滚动。 fixed背景图片不会随页面滚动而滚动而是相对于视口的原点左上角固定。 我们观察到这两个元素的背景图片是重叠在一起了。
local不随页面滚动但随元素内部滚动而滚动。 5 background-position
background-position用于设定图片的位置其值类型如下
.bg{/*关键字*/background-position:top;background-position:bottom;background-position:center;background-position:left;background-position:right;/*百分比值*/background-position:50% 50%;/*长度值*/background-position:10cm 10cm;/*边界偏移值*/background-position:top 10em left 10px;/*全局值*/background-position:inherit; /*继承父元素*/background-position:initial; /*设置为初始值默认*/background-position:revert; /*重置为样式表中的值*/background-position:unset; /*重置为初始值如果父元素背景位置有定义继承父元素的值*/
}
