您可以使用CSS向任何HTML元素添加背景效果。
以下CSS背景代码演示了可用于设置任何HTML元素的背景样式的各种CSS属性。文章源自你的网络首码项目网-https://www.youranweb.com/257.html
背景色
若要设置元素的背景色，请使用背景色属性。文章源自你的网络首码项目网-https://www.youranweb.com/257.html
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 20px;
background-color: yellow;
}
</style>
<div>
此“div”应用了背景色。
</div>背景图片
若要向元素添加背景图像，请使用背景图像属性。文章源自你的网络首码项目网-https://www.youranweb.com/257.html
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 70px;
background-image: url("/pix/samples/bg2.png");
}
</style>
<div>
此“div”应用了背景图像。
</div>背景重复
确定背景图像是否重复（平铺）。有关可能值的信息，请参阅背景重复。文章源自你的网络首码项目网-https://www.youranweb.com/257.html
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 70px;
background-image: url("/pix/samples/bg2.png");
background-repeat: no-repeat;
}
</style>
<div>
背景图像不会重复。
</div>背景位置
确定背景图像的位置。有关详细信息，请参阅背景位置。文章源自你的网络首码项目网-https://www.youranweb.com/257.html
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 70px;
background-image:url("/pix/samples/bg2.png");
background-repeat:no-repeat;
background-position: 100px;
}
</style>
<div>
背景图像位于距左侧 100 像素的位置。
</div>背景附件
确定背景图像是否随外部容器一起滚动。有关详细信息，请参阅背景附件。文章源自你的网络首码项目网-https://www.youranweb.com/257.html
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 70px;
height: 70px;
width: 150px;
background-image: url("/pix/samples/bg2.png");
overflow: auto;
background-attachment: fixed;
}
</style>
<div>
背景图像是固定的 - 它不会使用其外部容器滚动。此示例使用 CSS 溢出属性强制框在文本过多而无法放入框时滚动。
</div>速记代码
可以使用后台属性一次设置所有后台属性。有关详细信息，请参阅背景。文章源自你的网络首码项目网-https://www.youranweb.com/257.html
<!DOCTYPE html>
<title>Example</title>
<style>
div {
padding: 70px;
height: 70px;
width: 150px;
background: url("/pix/samples/bg2.png") repeat fixed;
overflow: auto;
}
</style>
<div>
此段落标记已使用“background”属性设置了样式，该属性是为 HTML 元素设置多个属性的简写。
</div>文章源自你的网络首码项目网-https://www.youranweb.com/257.html文章源自你的网络首码项目网-https://www.youranweb.com/257.html相关文章
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台，所有文章均来自网络和网友投稿，不代表本站任何立场，请勿盲目下载注册参与，以免为您带来不必要的损失。
评论