网络

教育改变生活

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 301|回复: 0
打印 上一主题 下一主题

CSS-6 背景+背景图片

[复制链接]

418

主题

419

帖子

1710

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1710
跳转到指定楼层
楼主
发表于 2023-10-9 11:15:07 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
CSS 背景
CSS 背景属性用于定义元素的背景效果。
在这些章节中,您将学习如下 CSS 背景属性:
·  background-color
·  background-image
·  background-repeat
·  background-attachment
·  background-position
CSS background-color
background-color 属性指定元素的背景色。
实例
页面的背景色设置如下:
body {
background-color: lightblue;
}

通过 CSS,颜色通常由以下方式指定:
·  有效的颜色名称 - 比如 "red"
·  十六进制值 - 比如"#ff0000"
·  RGB 值 - 比如"rgb(255,0,0)"
请查看 CSS 颜色值,获取可能颜色值的完整列表。
其他元素
您可以为任何 HTML 元素设置背景颜色:
实例
在这里,<h1>、<p> 和 <div> 元素将拥有不同的背景色:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}

不透明度 / 透明度
opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低,越透明:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
实例
div {
background-color: green;
opacity: 0.3;
}

注意:使用 opacity 属性为元素的背景添加透明度时,其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。
使用 RGBA 的透明度
如果您不希望对子元素应用不透明度,例如上面的例子,请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度:
100% opacity
60% opacity
30% opacity
10% opacity
您从我们的 CSS 颜色 章节中学到了可以将 RGB 用作颜色值。除 RGB 外,还可以将 RGB 颜色值与 alpha 通道一起使用(RGBA) - 该通道指定颜色的不透明度。
RGBA 颜色值指定为:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字。
提示:您可在我们的 CSS 颜色 一章中学到有关 RGBA 颜色的更多知识。
实例
div {
background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}

CSS背景图像
background-image 属性指定用作元素背景的图像。
默认情况下,图像会重复,以覆盖整个元素。
实例
页面的背景图像可以像这样设置:
body {  background-image: url("paper.gif");}
实例
本例展示了文本和背景图像的错误组合。文字难以阅读:
body {  background-image: url("bgdesert.jpg");}
注意:使用背景图像时,请使用不会干扰文本的图像。
还可以为特定元素设置背景图像,例如 <p> 元素:
实例p {  background-image: url("paper.gif");}

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

WEB前端

QQ|手机版|小黑屋|金桨网|助学堂  咨询请联系站长。

GMT+8, 2024-12-22 10:50 , Processed in 0.033921 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表