CSS探案之 background属性剖析_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

CSS探案之 background属性剖析_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:22 AM

首先，我们先来看看两个css属性：background和background-color，对！就是这两位，相信大家在平时应该没少

麻烦人家把，反正我是这样，几乎也少会用到背景图，原因很简单：就是有点害怕用背景图，感觉很繁琐，什么

尺寸啊，位置啊，是否重复啊等等，听着头都大，所以就一直没有去好好地学习一下它，每次碰见就劝自己“下次再

看吧”，然而“明日复明日，明日何其多”，干脆就解决了它

background是css背景属性的简写，例如这样：background: #00FF00 url(bgimage.gif) no-repeat fixed top;

但是它又可以拆分成下面的几个子属性：

background-color

background-position

background-size

background-repeat

background-origin

background-clip

background-attachment

background-image

这些子属性分别代表什么意思呢？下面开始一个个地为大家介绍

********************分割线*********************

属性一：background-color

如其名，这个属性是设置背景颜色的，有5种可能的值：

1.background-color:red;（已颜色英文名称命名的颜色值）

2.background-color:#ff0000;（十六进制的颜色值）

3.background-color:rgb(255,0,0);(rgb类型的颜色值)

4.background-color:transparent;(默认，背景色为透明)

5.background-color:inherit;（值从父元素继承）

当我们单独设置背景颜色时，background-color:red;和background:red;结果是一样的

属性二：background-image

该属性是定义背景图片的url，默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。

使用方法：

background-image:url('demo.jpg'); //url中传入背景图的链接

属性三：background-position

该属性设置背景图像的起始位置。

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

代码举例：

<style type="text/css">body{   border:1px solid #000;  background-image:url('/i/eg_bg_03.gif');  background-repeat:no-repeat;  background-attachment:fixed;  background-position:center;}</style></head><body><p><b>提示：</b>您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。</p></body>

运行结果：

属性四：background-size

background-size 属性规定背景图像的尺寸。

代码示例：

<style> body{background:url(/i/bg_flower.gif);background-size:63px 100px;-moz-background-size:63px 100px; /* 老版本的 Firefox */background-repeat:no-repeat;padding-top:80px;}</style></head><body><p>上面是缩小的背景图片。</p><p>原始图片：<img src="/static/imghwm/default1.png"  data-src="/i/bg_flower.gif"  class="lazy" alt="Flowers"></p></body>

运行结果：

属性五：background-repeat

background-repeat 属性设置是否及如何重复背景图像。

默认地，背景图像在水平和垂直方向上重复。

详细说明

background-repeat 属性定义了图像的平铺模式。

从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。

提示：背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。

代码示例：

<style type="text/css">body{border:1px solid #000;background-image:url(/i/eg_bg_03.gif);background-repeat: repeat-y}</style></head><body>

运行结果：

属性六：background-origin

background-origin 属性规定 background-position 属性相对于什么位置来定位。

注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

代码示例：

<style> div{border:1px solid black;padding:35px;background-image:url('/i/bg_flower.gif');background-repeat:no-repeat;background-position:left;}#div1{background-origin:border-box;}#div2{background-origin:content-box;}</style></head><body><p>background-origin:border-box:</p><div id="div1">这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</div><p>background-origin:content-box:</p><div id="div2">这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</div></body>

运行结果：

属性七：background-clip

background-clip属性规定背景的绘制区域

代码示例：

<style>div{width:300px;height:300px;padding:50px;background-color:yellow;background-clip:content-box;border:2px solid #92b901;}</style></head><body><div>这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。</div></body>

运行结果：

属性八：background-attachment

background-attachment规定如何设置固定的背景图像

代码示例：

<style type="text/css">body {background-image:url(/i/eg_bg_02.gif);background-repeat:no-repeat;background-attachment:fixed}</style></head><body><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p><p>图像不会随页面的其余部分滚动。</p></body>

运行结果：

注意红框里面的滚动条，实际运行时，页面滚动，背景不跟随滚动，但是现在的截图看不出效果，所以对不起各位了

结语：可能大家觉得我这篇文章只是在复制粘贴，没什么意义，确实如此，当我写到一半时，自己就在想放弃，但是

现在想起来，幸亏当时没有把那一半删掉，因为，在写的整个过程中，我先要看一遍w3school的帮助文档，结果还真

是收获不少。世上没有完全徒劳的事情，我坚信这一点，所以谨以此篇文章作为以后工作的参考

陳述

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

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

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

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

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

See all articles