网站制作教程:CSS背景代码

你的网络首码项目网 网站建设来源:你的网络首码项目网评论11字数 1325阅读模式

您可以使用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
相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网

发表评论