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