css3 background简写,background-size简写背景属性(CSS3)
background-size简写背景属性(CSS3)
我正在尝试在短手background属性中混合background-image和background-size属性。 基于W3C文档 background-size应该在用斜线( / )分隔的background-position属性之后。
W3C例子:
p { background: url("chess.png") 40% / 10em gray round fixed border-box; }
相当于:
p { background-color: gray; background-position: 40% 50%; background-size: 10em 10em; background-repeat: round round; background-clip: border-box; background-origin: border-box; background-attachment: fixed; background-image: url(chess.png) }
MDN说同样的事情。 我也发现这个和这篇文章关于速记CSS3背景属性解释这一点。
但是这不行! 当background-size和background-position对background-position-x和background-position-y有两个不同的值,或者对于background-size同样的东西时,如何做一个简写background属性也是不清楚的。 不清楚斜线( / )是如何发生的? 此示例在我的Chrome 15中不起作用。
例子我试图做一个简写是这个CSS代码:
div { background: url(http://www.placedog.com/125/125) 0 0 / 150px 100px repeat no-repeat fixed border-box padding-box blue; height: 300px; width:360px; border: 10px dashed magenta; }
一个更清晰的例子
这是工作 ( JSFiddle )
body{ background-image:url(http://www.google.com/intl/en_comhttp://img.dovov.comsrpr/logo3w.png); background-position:200px 100px; background-size:600px 400px; background-repeat:no-repeat; }
这不工作 ( jsfiddle )
body{ background:url(http://www.google.com/intl/en_comhttp://img.dovov.comsrpr/logo3w.png) 200px 100px/600px 400px no-repeat; }
这不工作 ( jsfiddle )
body{ background:url(http://www.google.com/intl/en_comhttp://img.dovov.comsrpr/logo3w.png) 200px/400px 100px/600px no-repeat; }
你的jsfiddle使用background-image而不是background
这似乎是“这个浏览器还不支持”的情况。
这个歌剧的作品: http : //jsfiddle.net/ZNsbU/5/
但是在ff5和ie8中不起作用。 (耶为outdatted浏览器:D)
代码:
body { background:url(http://www.google.com/intl/en_comhttp://img.dovov.comsrpr/logo3w.png) 400px 200px / 600px 400px no-repeat; }
你可以这样做:
body { background:url(http://www.google.com/intl/en_comhttp://img.dovov.comsrpr/logo3w.png) 400px 400px no-repeat; background-size:20px 20px }
哪些工作在ff5,歌剧,但不是ie8。
你可以做
body{ background:url('equote.png'),url('equote.png'); background-size:400px 100px,50px 50px; }
只是一个参考的笔记:我试图做这样的速记:
background: url('..http://img.dovov.comsprite.png') -312px -234px / 355px auto no-repeat;
但iPhone的Safari浏览器没有正确显示图像与一个固定的位置元素。 我没有检查一个不固定的,因为我很懒。 我不得不将CSS切换到下面的内容,注意在背景属性之后放置背景大小。 如果反向操作,背景会将背景大小恢复为图像的原始大小。 所以通常我会避免使用简写来设置背景大小。
background: url('..http://img.dovov.comsprite.png') -312px -234px no-repeat; background-size: 355px auto;
试试这样
body { background: #fff url("!--MIZO-PRO--!") no-repeat center 15px top 15px/100px; } /* 100px is the background size */
您将不得不使用供应商前缀来支持不同的浏览器,因此不能简写。
body { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
css3 background简写,background-size简写背景属性(CSS3)相关推荐
- CSS3(background)背景属性与文字阴影
CSS3(background)背景属性 CSS(background)背景属性CSS(background)背景属性与文字阴影 背景简写顺序: background-color background ...
- 【CSS 背景属性 background】
CSS 背景属性 background CSS 背景属性 1. background 属性: 一次性 集中定义 8个 背景相关属性 2. background-color 属性: 元素的 背景颜色 ( ...
- CSS 背景(background)+背景透明(CSS3)
CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置. background-color 背景颜色 background-image 背景图片地址 backgr ...
- html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- 背景透明css样式,CSS 背景(background)+背景透明(CSS3)
CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置. background-color 背景颜色 background-image 背景图片地址 backgr ...
- background复合属性顺序_background:常用背景属性(复合属性)
定义和用法 background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性:background-color | 背景颜色 background-position | 背 ...
- Background背景属性
Background背景属性 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等 1.背景颜色 源代码 background-color:颜色值; ...
- 理解CSS3中的background-size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- CSS3之background的调整和增加的属性
对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个背景图片 ...
最新文章
- RabbitMQ(三):RabbitMQ 使用场景
- Thinkphp学习笔记-编辑工具Sublime license
- python中常见的一些题目汇总
- Win10:tensorflow学习笔记(4)
- Jquery对象和dom对象获取html的方法
- Android Custom View ----invalidate() 、postInvalidate() and requestLayout()
- html中隐藏内容蜘蛛会抓取吗,蜘蛛会抓取识别JS、CSS、JSON,对SEO有什么影响
- Virtualbox 2.1突发性错误解决办法(也许是BUG)
- BGP路径属性分类与实验(华为设备)
- 把.Net开发环境迁移到Linux上去
- 关闭远程服务器端口,远程端口 程序自动关闭问题解决方案
- 是西电梦了我,还是我梦了西电
- Android 中的 Canvas API
- 为什么需要重写 equals方法?
- 记录个tomcat启动报错问题,Unable to process Jar entry
- anchor_free and anchor_based的简单理解
- 时间的过客怎么用计算机完整版,抖音时间的过客MC名决在哪看?附歌词完整版原文...
- kubernetes 部署 ceph-rbd-csi
- 中国未来的首富在医疗和计算机,《福布斯》2020年医疗健康领域全球富豪榜:孙飘扬夫妇稳居榜首...
- Web迅雷远程任意文件读取漏洞