首頁 web前端 html教學 9.css背景_html/css_WEB-ITnose

9.css背景_html/css_WEB-ITnose

Jun 24, 2016 am 11:17 AM

  这节也是关于盒模型的扩展,而我个人喜欢把盒模型想象成图画。元素的尺寸调整就是画布大小的调整,边框的设置就是画框的镶嵌。但是,作为一个最终要将画作展现到美术馆(网页)的艺术家来说,仅仅是这样还是不够的,就像各种画作里面可以进行背景的描绘一样,我们也可以为自己的画设置背景。

  下表总结了背景相关的一些属性:

属性 说明 CSS 版本
background-color 颜色 背景的颜色 1
background-image none 或 url 背景的图片 1 , 3
background-repeat 样式名称 背景图片的样式 1 , 3
background-size 长度值或其他 背景图片的尺寸 3
background-position 位置坐标 背景图片的位置 1
background-attachment 滚动方式 背景图片的滚动 1,3
background-clip 裁剪方式 背景图片的裁剪 3
background-origin 位置坐标 背景图片起始点 3
background 复合值 背景图片简写方式 1

  从上面的表可以看出,背景无非就两样:1.颜色,2.图片及相关设置。下面来逐一说明。

 

 

1.背景颜色

说明 CSS 版本
颜色 设置背景颜色为指定色 1
transparent 设置背景颜色为透明色 1

div {     background-color: silver; }
登入後複製

  解释:关于颜色的值请参考css颜色。而元素的背景颜色为透明色,是浏览器默认的,所以很少有必要专门去设置。另外,针对元素设置颜色会设置整个页面的颜色。

2.背景图片

  2.1 图片的引入

    使用background-image属性可以为背景引入图片

说明 CSS 版本
none 取消背景图片的设置 1
url 通过 URL 设置背景图片 1

body {     background-image: url(loading.gif); } 
登入後複製

  解释:none值是为了解决子元素的继承问题的,而url里面放的是图片的资源地址。

  2.2 图片的平铺方式

    由background-repeat属性决定

说明 CSS 版本
repeat-x 水平方向平铺图像 1
repeat-y 垂直方向平铺图像 1
repeat 水平和垂直方向同时平铺图像 1
no-repeat 禁止平铺图像 1

body {     background-image: url(loading.gif);     background-repeat: no-repeat; }
登入後複製

  解释:所谓平铺,就是当图片小于元素的大小时,会试图复制自己而填满整个元素

  2.3 图片位置的调整

    使用background-position属性来调整图片在元素里的位置,一般要先禁用图片的平铺行为。

说明 CSS 版本
top 将背景图片定位到元素顶部 1
left 将背景图片定位到元素左部 1
right 将背景图片定位到元素右部 1
bottom 将背景图片定位到元素底部 1
center 将背景图片定位到元素中部 1
长度值 使用长度值偏移图片的位置 1
百分数 使用百分数偏移图片的位置 1

  

/*将背景图片置于页面上方,如果想置于左上方则值为:top left*/body {     background-image: url(loading.gif);     background-repeat: no-repeat;     background-position: top; } /*使用长度值或百分数,第一值表示左边,第二个值表示上边*/body {     background-image: url(loading.gif);     background-repeat: no-repeat;    background-position: 20px 20px; } 
登入後複製

  2.4 图片的大小

    由background-size属性控制。

说明 CSS 版本
auto 默认值,图像以原尺寸显示 3
cover 等比例缩放图像,使图像至少覆盖容器,但有可能超出容器 3
contain 等比例缩放图像,使其宽度、高度中较大者与容器横向或纵向重合 3
长度值 CSS 长度值,比如 px、em 3
百分数 比如:100% 3

  具体说明看表格就好,这里就不举例了。

  2.5 图片是否滚动

    由background-attachment属性控制。

说明 CSS 版本
scroll 默认值,背景固定在元素上,不会随着内容一起滚动 1
fixed 背景固定在视窗上,内容滚动时背景不动 1

body {     background-image: url(loading.gif);     background-attachment: fixed; } 
登入後複製

    解释:fixed 值会导致背景产生水印效果,拖动滚动条而背景不动。

  2.6 图片在元素的那个区域显示

    由background-origin控制,和图片的位置调整不同,位置调整默认是在元素内部显示,而这里的居于除了元素的内部以为,还包括内边距和边框。

说明 CSS 版本
border-box 在元素的边框绘制背景 3
padding-box 在元素的内边距绘制背景 3
content-box 在元素的内容部分绘制背景 3

div {     width: 400px;     height: 300px;     border: 10px dashed red;     padding: 50px;     background-image: url(img.png);     background-repeat: no-repeat;     background-origin: content-box; } 
登入後複製

   解释:在内容部分绘制背景,其实就是设置背景起始位置。

  2.7 图片的裁剪

    由background-clip控制。在图片尺寸小于元素时,会有平铺的行为。而大于时,我们就要决定是否对多余的部分进行裁剪了。

说明 CSS 版本
border-box 在元素盒子内部裁剪背景 3
padding-box 在内边距盒子内部裁剪背景 3
content-box 在内容内部裁剪背景 3

div {     width: 400px;     height: 300px;     border: 10px dashed red;     padding: 50px;     background-image: url(img.png);     background-repeat: no-repeat;    background-origin: border-box;     background-clip: padding-box; } 
登入後複製

  

  2.8 简写形式

    和很多设置一样,背景也有相应的简写形式,其顺序如下:

    [background-color]

    [background-image]

    [background-repeat]

    [background-attachment]

    [background-position] / [ background-size]

    [background-origin]

    [background-clip];

div {     width: 400px; height:     300px; border: 10px dashed red;     padding: 50px;     background: silver url(img.png) no-repeat scroll left top/100% border-box content-box; }
登入後複製

 

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1317
25
PHP教程
1268
29
C# 教程
1248
24
了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML:結構,CSS:樣式,JavaScript:行為 HTML:結構,CSS:樣式,JavaScript:行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML,CSS和JavaScript的未來:網絡開發趨勢 HTML,CSS和JavaScript的未來:網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML的未來:網絡設計的發展和趨勢 HTML的未來:網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述 HTML與CSS vs. JavaScript:比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML:建立網頁的結構 HTML:建立網頁的結構 Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML的角色:構建Web內容 HTML的角色:構建Web內容 Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容,使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML:是編程語言還是其他? HTML:是編程語言還是其他? Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

See all articles