至顶网›软件频道 ›应用软件›利用CSS准确控制页面和元素背景

利用CSS准确控制页面和元素背景

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

使用CSS指令控制背景元素有很多优势：它不需要任何特别的软件，它能在大部分浏览器上工作，它可以对网站的背景图像和颜色进行集中控制。

作者：builder.com.cn 2007年4月23日

关键字：

控制背景颜色

首先，让我们来看看背景颜色属性，该属性定义了元素所应用的背景颜色。这个指令既可以接受十六进制的RGB值，也可以接受像red、silver或者blue这样的“颜色单词”。ListingA给了我们这样的一个示例：

Listing A

<html>

<head>

.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

利用CSS准确控制页面和元素背景

Listing A的示例

控制背景图像

如果你想使用背景图像来替代单一的颜色，可以使用background-image指令，这个指令允许你指定背景图像的URL。

Listing B

<html>

<head>

body {

background-image: url('mylogo.gif');

}

</style>

</head>

<body>

</body>

</html>

Figure B就是它运行后的结果：

Figure B

利用CSS准确控制页面和元素背景

Listing B 示例

你也可以为一个特殊元素指定它的URL，就如Listing C所示：

Listing C

<html>

<head>

.header {

width: 100%;

height: 60%;

border: solid 1px red;

background-image: url('mylogo.gif');

}

</style>

</head>

<body>

</body>

</html>

运行的结果如Figure C所示：

Figure C

利用CSS准确控制页面和元素背景

Listing C 示例

VIP专区

VIP用户

普通用户

邮件订阅

如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。

重磅专题

往期文章

利用CSS准确控制页面和元素背景

业界热点: