扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
作者：builder.com.cn 2007年4月23日
关键字：
控制背景颜色
首先，让我们来看看背景颜色属性，该属性定义了元素所应用的背景颜色。这个指令既可以接受十六进制的RGB值，也可以接受像red、silver或者blue这样的“颜色单词”。ListingA给了我们这样的一个示例：
Listing A
<html>
<head>
<style type="text/css">
.author {
background-color: #FFE303
}
.quote {
font-style: italic;
background-color: lime
}
</style>
</head>
<body>
<div class="author">William Shakespeare said:</div>
<p />
<div class="quote">To be or not to be, that is the question.</div>
</body>
</html>
它运行后的结果如Figure A所示：
|
Figure A
|
|
Listing A的示例 |
控制背景图像
如果你想使用背景图像来替代单一的颜色，可以使用background-image指令，这个指令允许你指定背景图像的URL。
Listing B
<html>
<head>
<style type="text/css">
body {
background-image: url('mylogo.gif');
}
</style>
</head>
<body>
</body>
</html>
Figure B就是它运行后的结果：
|
Figure B |
|
Listing B 示例 |
你也可以为一个特殊元素指定它的URL，就如Listing C所示：
Listing C
<html>
<head>
<style type="text/css">
.header {
width: 100%;
height: 60%;
border: solid 1px red;
background-image: url('mylogo.gif');
}
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
运行的结果如Figure C所示：
|
Figure C |
|
Listing C 示例 |
濠电姷顣介埀顒€鍟块埀顒€缍婇幃妯诲緞閹邦剛鐣洪梺闈浥堥弲婊勬叏濠婂牊鍋ㄦい鏍ㄧ〒閹藉啴鏌熼悜鈺傛珚鐎规洘宀稿畷鍫曞煛閸屾粍娈搁梻浣筋嚃閸ㄤ即宕㈤弽顐ュС闁挎稑瀚崰鍡樸亜閵堝懎濮┑鈽嗗亝濠㈡ê螞濡ゅ懏鍋傛繛鍡樻尭鐎氬鏌嶈閸撶喎顕ｉ渚婄矗濞撴埃鍋撻柣娑欐崌閺屾稑鈹戦崨顕呮▊缂備焦顨呴惌鍌炵嵁鎼淬劌鐒垫い鎺戝鐎氬銇勯弽銊ф噥缂佽妫濋弻鐔碱敇瑜嶉悘鑼磼鏉堛劎绠為柡灞芥喘閺佹劙宕熼鐘虫緰闂佽崵濮抽梽宥夊垂閽樺）锝夊礋椤栨稑娈滈梺纭呮硾椤洟鍩€椤掆偓閿曪妇妲愰弮鍫濈闁绘劕寮Δ鍛厸闁割偒鍋勯悘锕傛煕鐎ｎ偆澧紒鍌涘笧閹瑰嫰鎼圭憴鍕靛晥闂備礁鎼€氱兘宕归柆宥呯；鐎广儱顦伴崕宥夋煕閺囥劌澧ù鐘趁湁闁挎繂妫楅埢鏇㈡煃瑜滈崜姘跺蓟閵娧勵偨闁绘劕顕埢鏇㈡倵閿濆倹娅囨い蹇涗憾閺屾洟宕遍鐔奉伓
京公网安备 11010802021500号