脚本宝典收集整理的这篇文章主要介绍了css如何设置背景,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
css设置背景的方法:1、使用【background-color】属性为元素设置一种纯色;2、使用【background-image】属性为元素设置背景图像;3、background属性可在一个声明中设置所有的背景属性。
@H_304_6@
本教程操作环境:windows7系统、css3版,DELL G3电脑。
css设置背景的方法:
1、background-color属性
background-color属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
transparent 值
尽管在大多数情况下,没有必要使用 transparent。不过如果您不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置 transparent 值还是有必要的。
2、background-image属性
background-image 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
根据 background-rePEat 属性的值,图像可以无限平铺、沿着某个轴(x 轴或 y 轴)平铺,或者根本不平铺。
初始背景图像(原图像)根据 background-posITion 属性的值放置。
3、background属性
background是一个简写属性,可在一个声明中设置所有的背景属性。
可以设置如下属性:
background-color:规定要使用的背景颜色。
background-position:规定背景图像的位置。
background-size:规定背景图片的尺寸。
background-repeat:规定如何重复背景图像。
background-origin:规定背景图片的定位区域。
background-clip:规定背景的绘制区域。
background-attachment:规定背景图像是否固定或者随着页面的其余部分滚动。
background-image:规定要使用的背景图像。
注意:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。
示例:
<!DOCTYPE htML> <html> <head> <meta charset="UTF-8"> <style> div { width: 400px; height: 200px; border: 1px solid red; } .demo1{ background-color: paleturquoise; } .demo2{ background-image: url(1.jpg); background-Size: 400px; } .demo3{ background:paleturquoise url(1.jpg) no-repeat; background-size: 300px; } </style> </head> <body> <div class="demo1">纯色背景</div> <div class="demo2">图片背景</div> <div class="demo3">纯色+图片背景</div> </body> </html>
效果图:
相关学习推荐:css教程
以上就是css如何设置背景的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的css如何设置背景全部内容,希望文章能够帮你解决css如何设置背景所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。