`

css3 背景属性新特性

    博客分类:
  • CSS3
阅读更多
以往通过图片修饰页面的途径,在css3中得到了改善,对页面性能也有了一定的提升。

background-size设置背景图像大小
设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。
语法:background-size: auto | <长度值> | <百分比> | cover | contain;
cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;
contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
background-size:10px 5px;
-webkit-background-size:10px 5px;


background-origin
设置元素背景图片的原始起始位置。
语法:background-origin : border-box | padding-box | content-box;
分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。

background-clip确定背景的剪裁区域
将背景图片做适当的裁剪以适应实际需要。
语法:background-clip : border-box | padding-box | content-box | no-clip;
border-box. 从border区域向外剪裁背景
padding-box. 从padding区域向外剪裁背景
content-box.  从内容区域向外剪裁背景
no-clip


background颜色渐变
type:linear线性渐变radial径向渐变
background:-webkit-gradient(linear,0 0,/*渐变开始x和y坐标*/
0 100%,from(#FFF),to(#000));
分享到:
评论

相关推荐

    css3属性选择器,背景缩写

    在CSS中,我们可以使用单一的`background`属性来设置多个背景属性,如颜色、图像、重复方式、定位和混合模式等。背景缩写可以简化代码,提高效率。例如: ```css background: color image position/repeat/size ...

    1.07 css3新特性

    CSS3新特性 本资源摘要信息主要介绍CSS3的新特性,包括CSS3的介绍、CSS3选择器、CSS...CSS3新特性包括选择器、文本、边框、背景、颜色、渐变、盒模型等多方面的内容,为Web开发者提供了更加丰富的样式设计和布局方式。

    CSS3教程和css3新特性专题

    【CSS3教程和css3新特性专题】 CSS3是 Cascading Style Sheets(层叠样式表)的第三版,是Web设计领域的一个重要里程碑,引入了许多新的功能和特性,极大地增强了网页设计的灵活性和表现力。这个专题将深入探讨CSS3...

    CSS3动画属性边框属性等

    **CSS背景属性**提供了丰富的控制元素背景的方法。`background` 可以一次性设置所有背景属性,包括颜色、图片、位置和重复方式。`background-attachment` 控制背景图片是否固定,`background-color` 设置背景色,`...

    CSS3常用属性大全[参考].pdf

    它对CSS2进行了扩展,添加了一些新的特性和功能。本文档总结了 CSS3 中的常用属性,涵盖了动画、背景、边框、outline、盒模型等方面。 动画属性 Animation 属性用于规定动画的效果。常用的动画属性包括: * @...

    CSS基础2-选择器进阶+背景属性+元素显示模式+三大特性

    CSS基础-选择器进阶+背景属性+元素显示模式+三大特性 CSS基础选择器进阶: 在CSS中,选择器是用于选择HTML元素并应用样式的核心机制。选择器进阶是指在基础选择器的基础上,进一步学习和应用选择器的高级规则和...

    css3背景图片页面滚动视差效果

    在网页设计中,CSS3(层叠样式表第三版)为开发者带来了许多创新特性,其中“背景图片页面滚动视差效果”是近年来颇受欢迎的一种视觉表现手法。这种效果通过精心设计,使得背景图像在页面滚动时以不同的速度移动,...

    CSS3 SVG文字背景动画.zip

    CSS3是层叠样式表(Cascading Style Sheets)的第三个版本,它引入了许多新的特性和功能,使得网页设计更加丰富和动态。SVG(Scalable Vector Graphics)则是一种用于描述二维图形的矢量图形格式,其特点是分辨率...

    纯CSS3鼠标经过按钮背景填充动画特效

    在本案例中,我们关注的是“纯CSS3鼠标经过按钮背景填充动画特效”,这是一种利用CSS3特性和过渡效果来实现的一种交互式设计。这种特效可以提升用户体验,使用户在与按钮交互时感受到动态的视觉反馈。 首先,让我们...

    CSS3鼠标hover背景图片缩放动画效果

    **CSS3鼠标hover背景图片缩放动画效果**是现代网页设计中一种常见的交互技术,它通过CSS3的特性实现背景图片在鼠标悬停时产生平滑的缩放效果,为用户带来更丰富的视觉体验和更直观的交互反馈。在本案例中,当用户将...

    CSS3新特性和CSS3教程

    在CSS3中,一个显著的新特性是边框半径(border-radius),它允许我们创建具有圆角的元素,从而告别了过去使用复杂图片或者多个背景图层来模拟圆角的做法。边框半径可以通过`border-radius`属性设置,例如`border-...

    纯css3背景渐变按钮特效.zip

    CSS3是层叠样式表的第三版,它引入了许多新的特性和功能,其中就包括丰富的颜色过渡和渐变效果。这个项目可能包含了一系列不同设计风格的按钮,利用CSS3的属性来实现视觉上的吸引力和交互性。 【描述解读】 "纯css3...

    css简单背景实例

    3. **文字样式**:CSS还提供了丰富的文字样式控制,如`color`属性设置文字颜色,`font-family`指定字体系列,`font-size`设定字体大小,`text-align`用于调整文本对齐方式,`line-height`设定行高,`text-decoration...

    html+css透明背景

    在网页设计中,HTML与CSS是构建...为了确保跨浏览器兼容性,建议使用像`autoprefixer`这样的工具来自动添加必要的浏览器前缀,或者使用如`Modernizr`之类的库检测浏览器特性,以便为不支持新特性的浏览器提供回退方案。

    css3新属性.pdf

    《CSS3新特性详解》 CSS3作为CSS的最新版本,带来了许多革命性的新特性,极大地丰富了网页设计的可能性。虽然CSS3尚未正式发布,但其细致入微的改进已经得到了广泛的应用和支持。本文将详细介绍其中的一些关键特性...

    CSS新世界1

    【CSS新世界1】这本书是关于CSS3的深入探索,主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景,强调了模块化带来的灵活性和扩展性,让读者对CSS3有一个整体的认识。接着,作者详细讲解了...

    CSS3背景图滑动视差效果幻灯片.zip

    总的来说,CSS3背景图滑动视差效果幻灯片结合了CSS3的先进特性与JavaScript的动态效果,创造出引人入胜的网页互动体验,是现代网页设计中一种独特的视觉呈现手法。开发者可以通过学习和实践这一技术,提升网站的用户...

    css3实现一个div设置多张背景图片及background-image属性实例演示

    本文将深入探讨如何使用`background-image`属性来实现多张背景图片的设置,并介绍CSS3中的背景渐变。 首先,我们来看一下`background-image`属性的基本语法。它接受一个或多个 `&lt;bg-image&gt;` 值,每个值可以是 `none...

    css3 svg网页底部波浪动画背景特效

    总的来说,这个"css3 svg网页底部波浪动画背景特效"利用了CSS3的动画能力和SVG的矢量特性,创造出一个生动有趣的网页背景。设计师可以根据需要调整动画参数和SVG路径,以适应不同的设计需求,打造出各种风格的波浪...

Global site tag (gtag.js) - Google Analytics