background-size

IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性2

由 耗尽温柔 提交于 2019-12-03 16:38:55
3 背景属性 在CSS3中提供了多个背景属性，这里只介绍两个比较常用的属性，其他属性可以从手册中获取帮助。在CSS3中，通过background-image或者background属性可以为一个容器设置多张背景图片，也就是说可以把不同的背景图片放到一个块元素中。多张背景图片的URL之间使用逗号隔开即可。如果有多张背景图片，而其他属性只有一个，那么所有背景图片都应用该属性值。代码如下所示： 背景图片大小调整也是CSS3提供的一个新特性，它使得开发人员可以随心所欲地控制背景图片的尺寸大小。在CSS2中，背景图片的大小在样式中是不可控的，比如要想使得背景图片充满某个区域，要么重新做张大点的图，要么只能让它以平铺的方式来填充。在CSS3中提供了background-size属性，使得开发人员既可以直接缩放背景图片来填充这个区域，也可以设置背景图片大小，然后以设置好的尺寸去平铺这个区域。background-size属性需要一个或两个值（一个为必填，一个为可选），这些值既可以是像素（px），也可以是百分比（%）或auto，还可以是特定值cover、contain。示例代码如下所示： 其中background-size第一个值用于指定背景图片的宽度，第二个值用于指定背景图片的高度。如果只给background-size设置一个值，则第二个值默认为auto（cover和contain除外）

Css 浏览器兼容性及其其他常见问题

由 安稳与你 提交于 2019-12-03 12:59:07
CSS IE10~11 透明滚动条 透明滚动条不占空间，显示时会覆盖内容 //--如下样式使滚动条变为普通样式 body { /* ... */ -ms-overflow-style: scrollbar; } IE10~11 输入框多个叉号 点击叉号会清空输入框内容，会覆盖自己定制样式，可能不会富客户端框架的一些事件 input::-ms-clear { display: none; } IE8 背景透明时无法响应事件 IE8以下的浏览器bug，背景透明的元素无法点击(实际点击的是其底层的元素) 对需要透明的div添加背景图片，图片为透明的png IE8 png图片有黑色边框 PNG的支持问题在于IE7及以上版本使用了filter来支持PNG的Alpha通道， 所以对于PNG来说其实已经偷偷被应用了一个 filter了。 虽然解决了主要的PNG透明问题，不过也伴随着另一个副作用，就是不能再应用其他filter。 或者准确地说是应用其他filter会破 坏IE对PNG的支持。这就是为什么PNG在渐隐和渐现的时候会有难看的黑边。 IE8 不支持background-size属性 如果必须做背景拉伸，可以添加一个100%的div，并添加一个img图片，设置div的z-index为负数 IE8下A标签的文字无法响应拖动事件 IE8不支持A标签意外的标签的:hover伪类 如果使用了

2019.11.2 笔记

由 六眼飞鱼酱① 提交于 2019-12-03 11:09:43
一、穷游练习 html： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>穷游练习</title> <link rel="stylesheet" type="text/css" href="2019.11.1.css"/> </head> <body> <div id="body"> <div id="title"> 热门游记与话题 </div> <div id="content"> <div class="box"> <div class="leftTilite"> 精华 </div> <div class="head h1"></div> <span>MagicRabbit</span> <div class="inboxTop"> <img src="../image/美女1.jpg" > </div> <div class="inboxbottom"> <div class="text"> 【七国混血国境之南】越南--永不结束的夏天，永不褪色的诗意 </div> </div> </div> <div class="box"> <div class="leftTilite"> 精华 </div> <div class="head h2"></div> <span>ImJessieTsai</span>

background-size transition on hover causes chrome to “shake” background image

由 匿名 (未验证) 提交于 2019-12-03 02:30:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I am trying to achieve an effect I saw recently, where background image zooms on hover. I pretty much did it with example here: https://jsfiddle.net/qyh6nbwt/ but it seems to be very shaky (you will understand what I mean by hovering over it), I'm on osx running latest chrome version, have not checked it in other browsers yet. Is there a way to make it smoother, so it doesn't "shake" on zoom in? HTML <div id="example"> test </div> CSS #example { background-image: url(http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza

Using SVG as background image

由 匿名 (未验证) 提交于 2019-12-03 02:05:01
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: I can't seem to get this to work as desired. My page changes height based on what content is loaded and if it requires a scroll, the svg doesn't seem to be stretching... html { height : 100 %; background - image : url ( http : //www.horizonchampion.eu/themes/projectbase/images/bg.svg); background - size : 100 % 100 %; - o - background - size : 100 % 100 %; - webkit - background - size : 100 % 100 %; background - size : cover ; } Layer 1 Layer 2 Is it possible to do this with just CSS3? I'd like to not have to load ANOTHER JS

How can custom underline to a text

由 匿名 (未验证) 提交于 2019-12-03 01:22:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: How to get border-bottom like in image. I've tried text-underline for a h1 tag using text-decoration property. h1 { color : #F16A70; text - transform : uppercase ; font - size : 30 ; font - family : oswald text - decoration : underline ; } h1 : after { width : 60 %; border - bottom : 2px solid #F16A70; } <div> <h1> navigation </h1> </div> 回答1: Here's one more solution: h1 { color : #F16A70; text - transform : uppercase ; display : inline - block ; font - size : 30 ; font - family : oswald ; text - decoration : none ; background -

How do I set the background image size in CSS?

由 送分小仙女□ 提交于 2019-12-02 17:43:32
问题 So I have css code as follows: .jumbobg { background: url('http://znc.mane-frame.com/static/silverleaf.png') fixed no-repeat, url('../img/banner-1008444.jpg') no-repeat, grey; } I was wondering, for the first image (silverleaf.png) - how would I set the background-size for that particular image, using either pixels (for silverleaf) or auto ? I tried with background-size tag, but it would resize all the backgrounds defined above. 回答1: The thing is that you have specified two backgrounds in

css3背景切割，原点，渐变

由 匿名 (未验证) 提交于 2019-12-02 16:56:17
一、css3背景切割 语法：background-clip:border-box|padding-box|content-box; border-box 默认值，背景在border以及border以内的区域可见 padding-box 背景在padding区域和content区域可见 content-box 背景只在content区域可见 注：background-clip就是用来设置背景在哪个区域可见 二、背景原点 语法：background-origin:padding-box|border-box|content-box; padding-box 默认值，背景原点从padding区域开始 border-box 背景原点从border区域开始 content-box 背景原点从content区域开始 注：background-origin主要用来设置背景图的定位区域 注：我们经常将背景切割和背景原点结合使用 eg: background-clip:content-box; background-origin:content-box; 背景在content区域可见，背景原点从content区域开始 三、背景尺寸 语法：background-size:数值|百分比|cover|contain; 1.数值 以数值的方式来设置背景图的宽度和高度，第一个值代表宽度，第二个值代表高度

How do I set the background image size in CSS?

由 冷暖自知 提交于 2019-12-02 10:43:00
So I have css code as follows: .jumbobg { background: url('http://znc.mane-frame.com/static/silverleaf.png') fixed no-repeat, url('../img/banner-1008444.jpg') no-repeat, grey; } I was wondering, for the first image (silverleaf.png) - how would I set the background-size for that particular image, using either pixels (for silverleaf) or auto ? I tried with background-size tag, but it would resize all the backgrounds defined above. The thing is that you have specified two backgrounds in background property (separated with comma), so you have to do the same with background-size to get their

background-size transition on hover causes chrome to “shake” background image

由 这一生的挚爱 提交于 2019-12-01 16:51:33
I am trying to achieve an effect I saw recently, where background image zooms on hover. I pretty much did it with example here: https://jsfiddle.net/qyh6nbwt/ but it seems to be very shaky (you will understand what I mean by hovering over it), I'm on osx running latest chrome version, have not checked it in other browsers yet. Is there a way to make it smoother, so it doesn't "shake" on zoom in? HTML <div id="example"> test </div> CSS #example { background-image: url(http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg); background-position:
订阅 background-size