CSS3 backgrounds

CSS3 Backgrounds
CSS3 contains a few new background properties, which allow greater control of the background element.

In this chapter you will learn how to add multiple background images to one element.

You will also learn about the following new CSS3 properties:

  • background-size
  • background-origin
  • background-clip
时间： 2024-10-24 00:15:51

CSS3 backgrounds的相关文章

css3学习以及移动端开发基本概念的思考

html{ height:1000px; background-color: red; } @media screen and (width:2560px){ html{ background-color: blue; } } 注意:首先必须弄清楚,我们的width/height值得是浏览器的可视区域的大小(缩小或者放大浏览器会发生变化),而device-width和浏览器的缩放是没有关系的.如我的iMac是 2560*1440,那么当我缩小的时候颜色是红色,而全屏的时候颜色就是蓝色了!然而,如

CSS3混合模式mix-blend-mode/background-blend-mode简介

CSS3出现了两个与混合模式有关的属性,mix-blend-mode和background-blend-mode. 该CSS属性作用是让元素内容和这个元素的背景以及下面的元素发生“混合”. 可见,最近的Chrome以及FireFox浏览器都已经支持良好,而且无需使用私有前缀. 其支持的值很多,中英文对照如下: mix-blend-mode: normal; //正常 mix-blend-mode: multiply; //正片叠底 mix-blend-mode: screen; //滤色 mix

让IE6/IE7/IE8支持CSS3属性的8种方法介绍

我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的进步的.到目前为止,有不少可以让IE支持部分CSS3属性的工具.例如: 1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js) 这个玩意估计是试图让IE支持CSS3属性的鼻祖,还算蛮强大,就是性能开销较大,要解析很多文件脚本,给DOM添加大量的元素以及ClassName

解决浏览器不支持HTML5和CSS3

Modernizr插件可用于解决:<响应式web设计>提及! 其他: 第一种方法:IE9以下版本的IE将创建HTML5标签, 非IE浏览器会忽略这段代码,因此不会发生http请求,也就不影响网页执行效率. <!--[if lt IE9]> <script> (function() { if (! /*@[email protected]*/ 0) return; var e = "abbr, article, aside, audio, canvas, dat

让IE6IE7IE8支持CSS3属性的8种方法介绍

我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的进步的.到目前为止,有不少可以让IE支持部分CSS3属性的工具.例如: 1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js) 这个玩意估计是试图让IE支持CSS3属性的鼻祖,还算蛮强大,就是性能开销较大,要解析很多文件脚本,给DOM添加大量的元素以及ClassName

IE8不支持的部分css3属性处理

IE8不支持的部分css3属性 1.1 border-radius 圆角 border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;background: #EEFF99;behavior: url(/PIE.htc); 说明:不支持单边的圆角属性,比如: border-t

[CSS 混合模式]——mix-blend-mode/background-blend-mode简介

mix-blend-mode/background-blend-mode CSS3真是有很多的神奇的地方,这个两个元素你知道吗? 这是张大大拿过来的图,关于混合模式,借图一用. mix-blend-mode mix-blend-mode: normal; //正常 mix-blend-mode: multiply; //正片叠底 mix-blend-mode: screen; //滤色 mix-blend-mode: overlay; //叠加 mix-blend-mode: darken; /

css3学习笔记，随时帮你记起遗忘的css3

一,css3基本情况介绍. 顾名思义css3是css2的升级版本,它较以往版本新增了很多强大的功能.目前chrome,safari,firefoxopera,IE10以后都开始支持css3的效果. 1.具体增加的强大功能介绍..选择器:以前我们通常用class,id,tagname 来作为html元素的选择器.css3的选择器更强大,他可以减少标签中的class,id的数量,更方便的维护样式表,更好的实现结构与表现的分离..圆角效果:border-radius..块阴影和文字阴影:可以对任意di

css3的部分属性

1.阴影box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 注意:inset(内阴影) 可以写在参数的第一个或最后一个,其它位置是无效的实例 正值表示在对象的底部,负值表示在对象的顶部. .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px blue,4px 4px 6px red inset; } .boxshadow-inset{ width:100p