CSS – 萧邦的博客

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

萧邦 — Wed, 28 Jun 2017 07:07:59 +0000

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

引子

以前做网页布局的时候，一个div只能设置一张背景图片，设置多个背景的话，要用多个div嵌套才能实现，这样兼容性比较好。若您的网站要求兼容浏览器低版本，建议用这种方法。css3的出现，解决了一个div只能设置一个背景的问题，使一个div可以设置多个背景图片。background-image还可以设置线性渐变，等效果。

CSS3/CSS1 background-image 属性

语法:

background-image： [ ,  ]*
 = none |  |  |  |  |

默认值：none

取值：none：无背景图。

< url >：使用绝对或相对地址指定背景图像。

< linear-gradient>：使用线性渐变创建背景图像。（CSS3）

< radial-gradient>：使用径向(放射性)渐变创建背景图像。（CSS3）

< repeating-linear-gradient>：使用重复的线性渐变创建背景图像。（CSS3）

< repeating-radial-gradient>：使用重复的径向(放射性)渐变创建背景图像。（CSS3）

说明：

设置或检索对象的背景图像。

如果设置了background-image，同时也建议作者设置background-color用于当背景图像不可见时保持与文本一定的对比。

对应的脚本特性为backgroundImage。

兼容性：

IE8及更早浏览器不支持CSS3 background-image，即不支持多背景和使用渐变作为背景图像。

IE9不支持CSS3新增参数值：< linear-gradient > | < radial-gradient > |< repeating-linear-gradient > | < repeating-radial-gradient >作为背景图像。

Opera11.50-11.51不支持CSS3新增参数值：< radial-gradient > |< repeating-radial-gradient >作为背景图像。

写法：

css3设置多张背景图片

css3设置多张背景图片，可以如下写：

background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
url("haorooms.jpg") 400px 201px no-repeat;

也可以这么写：

background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat; 
background-position: 0 0, 200px 0, 400px 201px;

css3背景渐变

标准写法

background-image: linear-gradient(  [  |  ,]?  [, ]+ );

上面这种CSS语法我们经常见到，可能有人看不懂具体的意思，其实上面的些符号含义与正则表达式有很多一致之处：

[]在正则中表示一个字符类，这里，你可以理解为一个小单元。

|表示候选。也就是“或者”的意思，要么前面的，要么就后面的。

?为量词，表示0个或1个，言外之意就是，你可以不指定方向，直接渐变色走起。例如：

background:linear-gradient(red, yellow);

就是从上往下的红黄条纹效果。

+也是量词，表示1个或者更多个。因此，终止颜色是不可缺少的。例如：linear-gradient(red)是酱油命，白板。

<>中的是关键字，主要是让开发人员知道这里应该放些什么内容。

水平渐变

{background-image:linear-gradient(left, red 100px, yellow 200px);}

效果如下图：

左上角渐变

那从(100px, 100px)到(200px, 200px)应该就是从左上角开始，写法如下：

{background-image:linear-gradient(left top, red 100px, yellow 200px);}

效果如下

渐变方向写法组合：

left, right, top, bottom, left top, left bottom, right top, right， bottom

分别表示，从左往右，从右往左，从上往下，从下往上，从左上往右下，从……（都懂的，不全写了）

当然，也可以用angle角度来写！

{background-image:linear-gradient(-45deg, red 100px, yellow 200px);}


具体的样式大家可以尝试着写一下，看一下！很多情况下，用了才知道！
注意：有不少效果加了-webkit前缀以及-moz前缀会展现的不一样！
例如：
background-image:-webkit-linear-gradient(-45deg, red, yellow)
与
background-image:linear-gradient(-45deg, red, yellow)
在Chrome浏览器下的渐变方向居然是相反的！但是45deg是正常的。Firefox浏览器下也是如此，有前缀和没有前缀方向相反！咋回事？
原因很简单，CSS3目前还是草案阶段！
从浏览器去掉前缀前后的变化可以推测，之前，W3C的渐变坐标是与photoshop中一致的，但是，后来，由于某些原因，修改了。
至于什么原因，根据我草草的查找，可能与下面几个关键字之一有联系：animation/transition动画、write-mode书写方向、flex box模型、以及radial-gradient渐变等。在这里就不深入研究了！
前缀兼容
基本的写法如下：
background-image: linear-gradient(top, #fff, #dededc);
但是为了兼容，有时候要写多个前缀，变成如下：
background-image: -ms-linear-gradient(top, #fff, #dededc);
background-image: -moz-linear-gradient(top, #fff, #dededc);
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dededc));
background-image: -webkit-linear-gradient(top, #fff, #dededc);
background-image: -o-linear-gradient(top, #fff, #dededc);
background-image: linear-gradient(top, #fff, #dededc);

关于”css3实现一个div设置多张背景图片及background-image属性“今天就写到这里，有问题可以相互交流，加油！



只用CSS，图像可以实现和兼容性看起来不错的15种悬停效果
萧邦 — Wed, 14 Jun 2017 08:09:50 +0000
所以有人想要的是通过列出的步行运动为自己，然后分享。正如添加效果的链接或按钮的时间徘徊，它是在你想给的东西效果即使在图像上悬停时的时间可能使用效果的样本。由于大量使用CSS3不支持所有的浏览器，这两者只使用CSS来实现，被缩放滑块黑色和白色模糊闪光灯，有15种。

常见的HTML CSS·
样品已经使用HTML，如下面的代码，还规定了以下内容作为CSS共同风格。 由于还存在指定CSS的宽度和高度的一部分，请调整至适合他们到自己的环境中时，它仅作参考。
HTML

	

CSS
figure {
	width: 300px;
	height: 200px;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
}
此外，因为它使用的每个动画GIF引入运动，实际移动和显示可以在下面的演示页面发现。
DEMO



只用CSS，图像可以实现和兼容性看起来不错的15种悬停效果


1.放大＃1




那些在悬停时的图像落实了扩大如下CSS，实施描述。 当你想改变倍率scale的值，当你想改变，如速度transition，请分别改变任何东西的价值。

CSS
figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}
实际运动可以在下面找到。
DEMO – 放大＃1


2.放大＃2




同样的事情，比如图像被放大在悬停的时间，但这里img的width改变来改变图像大小，你可以用的感觉，不像早期的表现。 该CSS是一个实现描述如下。

CSS
figure img {
	width: 300px;
	height: auto;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	width: 350px;
}
实际运动可以在下面找到。
DEMO – 放大＃2


3.缩小＃1




“ 1.放大＃1中的图像的效果在介绍悬停时的反向版本”展开，就在悬停的时候scale，但我们通过在初始状态时增加值增加的价值，在这里提前，在悬停时通过降低值的图像是要缩小的效果的实现。 该CSS是一个实现描述如下。

CSS
figure img {
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	-webkit-transform: scale(1);
	transform: scale(1);
}
实际运动可以在下面找到。
DEMO – 缩小＃1


4.缩小＃2




这是“ 2放大＃2中的影响而发生反向版本来放大在引入时的图像悬停在”，如下所述CSS的实施进行说明。

CSS
figure img {
	width: 400px;
	height: auto;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	width: 300px;
}
实际运动可以在下面找到。
DEMO – 缩小＃2


5.滑动





事先margin应被放置在使用的图像的位置稍微移位，即在悬停的时间margin是什么通过擦除标记的影响，如滑动幻灯片图像。 该CSS是一个实现描述如下。
※只要所使用的图像的宽度是比“要面积+幻灯片要被显示的距离”时，scale你的指定不需要。


CSS
figure img {
	margin-left: 30px;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	margin-left: 0;
}
实际运动可以在下面找到。
DEMO – 幻灯片


6.旋转（+缩小）




在悬停的时候那些图片给旋转的效果，进一步“ 3.缩小＃1是个什么形象也补充说，在悬停的介绍的时候缩小效应”。 描述如下CSS于旋转角度执行rotate一个，放大倍率scale可以通过改变每个的值被改变为任何移动。

CSS
figure img {
	-webkit-transform: rotate(15deg) scale(1.4);
	transform: rotate(15deg) scale(1.4);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	-webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
}
实际运动可以在下面找到。
DEMO – 旋转（+缩小）


7.模糊




filter这是一个模糊效果的图像使用，但将是东西，此时的样品释放那些模糊预处理效果，在当时徘徊的，也apparent’re与模糊效果时，悬停在反向I. CSS是，如果你想调整在下面的示例源模糊效果：实现描述如下blur(3px)，请更改已被指定为对所有这些的价值点。

CSS
figure img {
	-webkit-filter: blur(3px);
	filter: blur(3px);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	-webkit-filter: blur(0);
	filter: blur(0);
}
实际运动可以在下面找到。
DEMO – 模糊


8.灰阶




同时filter使用，这里是图像的灰度转换。 该CSS是一个实现描述如下。

CSS
figure img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}
实际运动可以在下面找到。
DEMO – 灰度


9.棕褐色




这里还filter使用了该类型的，它是由图像转换为深褐色调获得。 该CSS是一个实现描述如下。

CSS
figure img {
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	-webkit-filter: sepia(0);
	filter: sepia(0);
}
实际运动可以在下面找到。
DEMO – 棕褐色


10.模糊+灰度




据上面介绍filter它，但你也可以使用多个效果的组合。 这是“ 7模糊 ”和“ 8灰度其在组合试图与”，执行被描述如下的CSS。

CSS
figure img {
	-webkit-filter: grayscale(0) blur(0);
	filter: grayscale(0) blur(0);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	-webkit-filter: grayscale(100%) blur(3px);
	filter: grayscale(100%) blur(3px);
}
实际运动可以在下面找到。
DEMO – 模糊+灰阶


11.不透明度＃1




这也是经常看到的实施，在悬停的时候opacity是用传输的事情。 该CSS是一个实现描述如下。

CSS
figure img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	opacity: .5;
}
实际运动可以在下面找到。
DEMO – 不透明度＃1


12.不透明度＃2




在同一个悬停和更早opacity的是，使用传输的事情，但图像的父元素（在此示例中figure只对背景颜色的名字），你也可以稍微不同的方式来显示。 该CSS是一个实现描述如下。

CSS
figure {
	background: #1abc9c;
}
figure img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
figure:hover img {
	opacity: .5;
}
实际运动可以在下面找到。
DEMO – 不透明＃2


13.闪烁




也是用这个博客是，它是在悬停的时候什么样的形象给了像闪烁了一下一个效果。 该CSS是一个实现描述如下。

CSS
figure:hover img {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
实际运动可以在下面找到。
DEMO – 闪烁


14.服务




这是更智能和通用的高描述方法有可能的，但是这基兰和光得到的效果，如从悬停的时间从左向右流动。 该CSS是一个实现描述如下。

CSS
figure {
	position: relative;
}
figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}
实际运动可以在下面找到。
DEMO – 服务


15.圈




是什么给了连锁反应，如谷歌的材质设计，在使用的时候徘徊。 该CSS是一个实现描述如下。

CSS
figure {
	position: relative;
}
figure::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
figure:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
实际运动可以在下面找到。
DEMO – 圈

以上，这是形象与良好的兼容可能将徘徊，只能在CSS实现的效果。 当然，根据相应的浏览器，但由于这种方式只能轻易多种如果浏览器没有问题，如何显示CSS，什么页面，如图像一字排开很多，如照片库页我认为，当你想用它的效果是非常有用的。 另外，我在以前这个博客中写道“ 标题效果20只实现在CSS中还建议在组合使用”，在这里也因为它只能在CSS可以很容易地实现，就看也在这里，如果你有兴趣请尝试探测。
这里除了它在所有的方式引入，如果有，可以在CSS实现也请告诉我一个有趣的效果:)
本文转载自nxworld,仅作技术分享。点击阅读原文