背景图片 — 整页: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
相关文章

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