CSS3 background-image属性

2024-10-22

CSS3 background属性

background: #00FF00 url(bgimage.gif) no-repeat fixed top; background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性: background-color:#fff; //规定要使用的背景颜色. background-position:center left; //规定背景图像的位置. background-size:length|percentage|cover|contain; //规定背景图片的尺寸. ba

background复合属性详解（上）：background-image

background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本的情况是指定一张图片的url作为背景: <style> .parent{ height:200px; width:500px; border: 10px solid rgb(125, 125, 123); background-color: #bff; background-image:url(h

CSS3利用text-shadow属性实现多种效果的文字样式展现

一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前为止Safari.FireFox.Chrome和Opera等主流浏览器都支持该功能. 二.介绍CSS3的 text-shadow属性 text-shadow属性可以给页面上的文字添加阴影效果,基本语法如下: text-shadow:none|<length>none|[<shadow>

css3 background

background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个属性,缩写如下: background:background-color,background-image,background-repeat ,background-attachment, background-position; 其中background-image,background-rep

CSS3中动画属性transform、transition 和 animation

CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使…变形:转换 .这里我们就可以理解为变形.那都能怎么变呢? none 表示不进行变换: rotate 旋转 transform:rotate(20deg) 旋转角度可以为负数.需要先有transform-origin定义旋转的基点可为left top center right

CSS3新增文本属性实现图片点击切换效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词"> <meta name="Description" content="描述"> <title>CSS3新增文

半深入理解CSS3 object-position/object-fit属性

半深入理解CSS3 object-position/object-fit属性转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/ 一.春来了,春来了~ 帘外雨潺潺,春意阑珊. 奇怪,为何我要写个诗段子呢? 或许是因为,本应是阳春三月的时候,依旧阴冷潮湿,丝丝凉意侵入小腿,无法让我无法安心整理思路.想明白了这点,我立马站起身来,打开房门,大步走出去!去外面呼吸新鲜空气…………吗?不是的,我

利用css3的text-shadow属性实现文字阴影乳白效果

现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看到的,所以拿过来分享给大家.喜欢的可以自己去试试. 有效利用css3的text-shadow属性,可以实现很多漂亮的效果,今天将介绍一个用CSS3文字阴影属性实现乳白文字效果,预览图如下: 英文milky 字体:经典圆体繁字体:微软雅黑实现方法很简单,大家可直接复制下面代码去体验下吧: HTML

css3的clip-path属性

css3的clip-path属性网上看到的都是因为2年前一个出名的网站引发了对该属性的研究.所以大概是2年前火了一阵子的属性.2016-09-10 23:54:00 直接开始总结它的用法: 2个基本概念: clip-path:直译就是裁剪路劲.在我总结中过程来看,它是在一个矩形的基础上进行的裁剪.如果不懂,后面看代码你就知道是什么意思. 第一个概念:裁剪路劲,它是我们用来裁剪元素的路劲,它标记了我们需要裁剪的区域. 第二个概念:裁剪区域,是裁剪路劲闭合后所包含的全部区域. 裁剪区域以外的部分

CSS3 ： transition 属性

CSS3的 transition 属性用于状态过度效果! 1.语法: transition: property duration timing-function delay; -moz-transition: property duration timing-function delay; -webkit-transition: property duration timing-function delay; -o-transition: property duration timing-fun

CSS3浏览器私有属性

CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分.因此每种内核的浏览器都只能识别带有自身私有前缀的CSS3属性.我们在书写CSS3代码时,需要在属性前加上浏览器的私有前缀,然后该种内核的浏览器才能识别相应的CSS3属性.例如给一个div设置CSS3的-border-radius-时,chrome浏览器只能识别-webkit-border--radius-(前缀为-webkit-),而firefox浏览器只能识别-moz-bord

css3 常用的属性

1.伪类选择符 Pseudo-Classes Selectors Selectors选择符 CSS Version版本 Description简介 E:link CSS1 设置超链接a在未被访问前的样式. E:visited CSS1 设置超链接a在其链接地址已被访问过时的样式. E:hover CSS1/2 设置元素在其鼠标悬停时的样式. E:active CSS1/2 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. E:focus CSS1/2 设置元素在成为输入焦点(该元

巧用 CSS3 filter(滤镜) 属性

原文链接:CSS3 filter(滤镜) 属性效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度). 默认值 none 继承 no 动画支持是.详细可查阅 CSS 动画版本 CSS3 浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号. 紧跟在数字后面的 -webkit- 为指定浏览器的前缀. 属性 filter 18.0 -webkit- 不支持 35.0 6.0 -webki

css中background背景属性概

css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示*/background:url(背景图片路径) no-repeat bottom center;/*不重复背景图片底部中间显示*/background:url(背景图片路径) no-repeat right top;/*不重复背景图片右上方显示*/ba

CSS3外轮廓属性

外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者被激活时呈现. outline属性早在CSS2中就出现了,主要是用来在元素周围绘制一条轮廓线,可以起到突出元素的作用.但是并未得到各主流浏览器的广泛支持,在CSS3中对outline作了一定的扩展,在以前的基础上增加新特性.outline属性的基本语法如下: outline: ［outline-co

学习笔记：CSS3的filter属性

CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: i

css3.0新属性效果在ie下的解决方案(兼容性)

css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不支持这些属性并不能说明ie就实现不了css3.0新属性的效果!我们收集整理了一些css3.0新属性效果在ie下的解决方案! .box_round {-moz-border-radius: 12px; /* FF1+ */ -webkit-border-radius: 12px; /* Saf3+,

CSS3展现精彩的动画效果 css3的动画属性

热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Animation. transform属性虽然看起来可以实现动画的效果,但本质其实是静态的,说白一点其实就是一个图形的变形工具:而transition属性是一个简单的动画属性,操作起来非常的简单:在这里主要为大家介绍Animations属性,这是个名副其实的动画属性,虽然官方也没有过多的介绍,只是简要的说

css3 的box-sizing属性理解

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中会发现这些css.box-sizing究竟有什么用还得重头说起... 我们一般计算一个块状元素的宽度的时候会将左右padding,左右border宽度,margin 都算进去,如下图所示(浏览器默认计算方式),宽度不是100px,而是160px: style="width:100px;padding

CSS3的box-sizing属性

盒模型的宽度,在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 border 与 padding 都包含在 width 之内 W3C标准中的盒模型宽度为内容宽度,不包括内边距padding和边框border CSS3 的box-sizing属性共有三个值:content-box padding-box border-box content-box与以前的W3C标准对盒模型的处理一样 padding-box在指定width时会把padding计算在内 border-box

CSS3 background-image属性

热门专题