CSS 背景(background)+背景透明(CSS3)
要设置CSS背景,可以使用background属性。background属性可以分为多个子属性,如background-color(背景颜色)、background-image(背景图片)、background-repeat(背景重复)、background-position(背景位置)等。
例如,要设置背景颜色为红色,可以使用以下CSS代码:
“`
body {
background-color: red;
}
“`
要设置背景图片,可以使用background-image属性,并指定图片的URL。例如:
“`
body {
background-image: url(“background.jpg”);
}
“`
如果要设置背景图片的重复方式,可以使用background-repeat属性。常用的取值有repeat(默认,图片在水平和垂直方向都重复)、repeat-x(图片只在水平方向重复)、repeat-y(图片只在垂直方向重复)、no-repeat(图片不重复)等。
“`
body {
background-image: url(“background.jpg”);
background-repeat: no-repeat;
}
“`
需要注意的是,设置背景图片时,最好指定一个合适的背景颜色作为备选,当图片无法加载时,背景颜色可以作为替代显示。
至于背景透明,可以使用CSS3中的opacity属性或者RGBA颜色值来实现。opacity属性可以设置元素的整体透明度,取值范围为0(完全透明)到1(完全不透明)。例如:
“`
div {
background-color: red;
opacity: 0.5;
}
“`
这样设置后,div元素的背景颜色为红色,且透明度为50%。
如果只需要背景颜色透明,而不影响元素内部的内容透明度,可以使用RGBA颜色值。RGBA颜色值可以通过指定红、绿、蓝和透明度四个通道来定义颜色。例如:
“`
div {
background-color: rgba(255, 0, 0, 0.5);
}
“`
这样设置后,div元素的背景颜色为红色,且透明度为50%。而元素内部的内容则不会受到透明度的影响。