CSS3中background背景的使用

最新推荐文章于 2024-09-28 00:53:29 发布

原创最新推荐文章于 2024-09-28 00:53:29 发布 · 257 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了CSS中的背景渐变效果及其应用，包括背景裁剪区域与起始点的概念，并通过实例展示了如何使用这些属性创建美观且响应式的网页设计。

1. background渐变色例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.div2{
	width:100px;height:100px;background-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#999999), to(#333333), color-stop(0.5,#336600), color-stop(0.5,#FFFFFF));
}

</style>
</head>
<body>
	<div class="div2"></div>
</body>
</html>

2. background-clip裁剪区域
background-clip有三种属性:border, padding, content.
分别指覆盖border的区域, 覆盖padding区域裁剪border. 覆盖content区域裁剪border和padding.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-clip</title>
<style>
.back{
width:120px;
height:100px;
border: 20px dashed #333; 
padding: 20px; 
background: #ccc;
-moz-background-clip:content;
-webkit-background-clip:content;
background-clip:content;}
</style>
</head>
<body>
<div class="back"></div>
</body>
</html>

3.background-origin背景显示开始点
同样有border(从边框开始显示背景图), padding(从padding开始背景图), content(从真正内容开始显示背景图).