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

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

背景图片 — 整页:background-image

<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<style>
    body {
        background-image: url('/pix/samples/bg2.png');
    }
</style>
</head>
<body>

<h1>背景颜色</h1>
<p>此页面的背景图像应用于 <a href="/html/tags/html_body_tag.cfm"><code>body</code></a> 要素.</p>

</body>
</html>

背景图像 — 元素的所有实例:background-image

<!DOCTYPE html>
<title>My Example</title>
<style>
    div {
        background-image: url('/pix/samples/bg2.png');
        width: 20vw;
        padding: 3vw;
        border: solid;		
    }
</style>

<div>这是一个“div”元素。</div>
<p>这是一个“p”元素。</p>
<div>这是一个“div”元素。</div>

背景图像 — 使用类:background-image_using_a_class

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        background-image: url('/pix/samples/bg2.png');
    }
    div {
        width: 20vw;
        padding: 3vw;
        margin: 2vw;
        border: solid;		
    }
</style>

<div class="box">Class</div>
<div>No class</div>
<div class="box">Class</div>

背景图片 — 使用 ID:background-image_using_an_id

<!DOCTYPE html>
<title>My Example</title>
<style>
    #unique {
        background-image: url('/pix/samples/bg2.png');
    }
    div {
        width: 20vw;
        margin: 2vw;
        padding: 3vw;
        border: solid;		
    }
</style>

<div id="unique">ID</div>
<div>No ID</div>

<p>请注意,页面上只有一个元素可以使用给定的ID。要设置多个元素的样式,请使用类。</p>

背景图像 — 非重复:background-image_whole_page_no-repeat

<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<style>
    body {
        background-image: url('/pix/samples/bg2.png');
        background-repeat: no-repeat;
    }
</style>
</head>
<body>

<h1>Background Color</h1>
<p>This page has a background image applied to the <a href="/html/tags/html_body_tag.cfm"><code>body</code></a> element.</p>

</body>
</html>

背景图像 — 与背景色混合:css_background-blend-mode

<!DOCTYPE html>
<title>Example</title>
<style>
div {
  width: 200px;
  height: 200px;
  color: white;
  font-family: sans-serif;
  text-align: center;
  padding: 10px;
  float: left;
  background-color: red;
  background-image: url('/pix/samples/11m.jpg');
  background-size: cover;
}
.blender {
  background-blend-mode: hard-light;
}
</style>
<div>
  Not Blended
</div>
<div class="blender">
  Blended
</div>

将元素与背景混合:css_mix-blend-mode

<!DOCTYPE html>
<title>Example</title>
<style>
div {
  background-image: url(/pix/samples/22l.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  font-family: georgia, serif;
  font-size: 7vw;
  text-align: center;
  border: solid;
}
.blender {
  mix-blend-mode: difference;
  color: orange;
}
</style>

<div>
  <h2 class="blender">"Meow" means "woof" in cat.</h2>
</div>

背景颜色 — 整页:background-color_whole_page

<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<style>
    body {
        background-color: gold;
    }
</style>
</head>
<body>

<h1>Background Color</h1>
<p>This page has a background color applied to the <a href="/html/tags/html_body_tag.cfm"><code>body</code></a> element. More colors <a href="/css/css_color_codes.cfm">here</a>.</p>

</body>
</html>

背景色 — 元素的所有实例:background-color_on_all_instances_of_an_element

<!DOCTYPE html>
<title>My Example</title>
<style>
    div {
        background: gold;
        width: 20vw;
        padding: 1vw;
        border: solid;		
    }
</style>

<div>This is a 'div' element.</div>
<p>This is a 'p' element.</p>
<div>This is a 'div' element.</div>

背景色 — 使用类:background-color_using_a_class

<!DOCTYPE html>
<title>My Example</title>
<style>
    .box {
        background: gold;
    }
    div {
        width: 20vw;
        height: 20vh;
        float: left;
        margin: 1vw;
        padding: 1vw;
        border: solid;		
    }
</style>

<div class="box">Class</div>
<div>No class</div>
<div class="box">Class</div>

背景色 — 使用 ID:background-color_using_an_id

<!DOCTYPE html>
<title>My Example</title>
<style>
    #unique {
        background: gold;
    }
    div {
        width: 20vw;
        height: 20vh;
        float: left;
        margin: 1vw;
        padding: 1vw;
        border: solid;		
    }
    p {
        clear: both;
    }
</style>

<div id="unique">ID</div>
<div>No ID</div>

<p>Note that only one element on the page can use a given ID. To style multiple elements, use a class.</p>
文章源自你的网络首码项目网-https://www.youranweb.com/274.html
相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网

发表评论