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(从真正内容开始显示背景图).
分享到：
相关推荐
CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位
本文将深入探讨如何使用`background-image`属性来实现多张背景图片的设置，并介绍CSS3中的背景渐变。 首先，我们来看一下`background-image`属性的基本语法。它接受一个或多个 `<bg-image>` 值，每个值可以是 `none...
在提供的文档“div css background背景.doc”中，可能包含了更详细的代码示例和实践案例，建议查看以加深理解。对于初学者来说，通过动手实践和不断调整背景属性，可以更好地掌握这个重要技能。记住，良好的网页设计...
首先，要实现这个效果，我们需要了解CSS3中的几个关键属性： 1. **background-size**: 这个属性用于设置背景图片的尺寸，可以是像素值、百分比或关键词（如cover、contain）。在动画中，我们可以改变这个属性来实现...
本话题将详细探讨如何在layui中修改弹出层的样式，特别是如何使用CSS的`background`属性来设置多个背景图片。 首先，我们需要理解layui弹出层的工作原理。layui的弹出层是通过JavaScript动态生成HTML元素实现的，...
在CSS3中，可以使用`background-color`属性来设置背景色，而动画则可能涉及到`background-image`（如果使用渐变作为背景）或`background-size`（如果使用背景图片）。 4. **过渡（Transition）**：CSS3的`...
在CSS中，我们使用`background`属性或者其子属性（如`background-image`、`background-size`、`background-position`、`background-repeat`）来设置背景视频。其中，`background-size`用于控制视频的大小，`...
总之，CSS3的`background-size`属性是响应式设计中的一个强大工具，它能确保背景图片在不同设备上等比例缩放，保持视觉一致性。通过灵活地选择合适的值，我们可以创建出适应性强、视觉效果出色的网页。在实际开发中...
首先，我们需要了解CSS3中的背景属性，例如`background-image`、`background-size`、`background-position`和`background-repeat`等。这些属性可以帮助我们设置和调整背景图片。 1. `background-image`: 用于指定...
这个问题是由于IE8浏览器的内核不支持CSS3新特性导致的，而`background-size`属性则是CSS3中用于控制背景图片尺寸的一个强大工具。 首先，我们需要理解`background-size`属性的作用。它允许开发者独立于元素本身的...
在这个"css简单背景实例"中，我们将探讨如何使用CSS来设置页面背景以及文字样式，这对于初学者来说是一个很好的实践案例。 首先，我们来看"诗歌.css"这个文件。它可能包含了以下内容： 1. **背景颜色**：CSS允许...
在CSS3中，网页设计者可以利用一系列新特性来创建出引人注目的动态效果，其中就包括网页动态渐变背景动画特效。本教程将深入探讨如何使用CSS3实现这样的特效，尤其是如何设置多种渐变颜色，从而为网页增添丰富的视觉...
在提供的压缩包文件中，可能包含了HTML（index2.html、index3.html、index.html）、CSS（css目录）、图片（images目录）和JavaScript（js目录）文件，用于实现上述的背景颜色透明和图片切换效果。通过分析这些文件，...
以上介绍的是CSS中关于背景设置的基本知识点及其用法。通过合理使用这些属性，可以有效地为网页元素设置美观的背景，从而增强网站的整体视觉效果。掌握这些基本属性的应用方法对于前端开发人员来说是非常重要的基础...
【CSS3 SVG线条圆圈变换背景动画特效】是一种在网页设计中常见的视觉表现手法，它利用了CSS3的动画能力和SVG（Scalable Vector Graphics）的矢量图形特性，为网页创造出富有动态美感的背景效果。这个特效的核心是...
首先，我们来详细了解一下CSS3中的`background-attachment`属性。这个属性用于定义背景图像如何随元素滚动。当设置为`scroll`时，背景图像会随元素一起滚动；设置为`fixed`时，背景图像会固定在视口上，即使页面滚动...
首先，CSS3中的`transition`属性是实现背景颜色平滑过渡的关键。`transition`允许我们在改变某个属性时添加一个过渡效果，例如改变文字背景色。要使用`transition`，我们需要指定两个主要部分：要过渡的属性和过渡的...
在CSS3中，我们可以利用:hover伪类来实现鼠标悬停时元素背景的动态效果，比如鼠标指向时背景放大，移开时缩小。这种效果在网页设计中常用于按钮、链接或者图片，为用户提供更丰富的交互体验。下面我们将详细介绍如何...
在这个案例中，我们使用了以下CSS背景属性： - **`background-image`**：设置了背景图片为`background.jpg`。 - **`background-repeat`**：设置背景图片不重复显示。 此外，还设置了一些其他样式，如文字颜色、字体...
在CSS3中，属性选择器和背景缩写是两个重要的概念，它们极大地提高了CSS的效率和可维护性。本文将详细探讨这两个主题。 首先，让我们来看看CSS3的属性选择器。属性选择器允许我们根据HTML元素的特定属性来选择和...