Image 如何用html5/css3技术替换图像
看到这张图片了吗 我们有一个div,它使用这个图像作为背景图像Image 如何用html5/css3技术替换图像,image,html,css,Image,Html,Css,看到这张图片了吗 我们有一个div,它使用这个图像作为背景图像 .header_background{ display: inline-block; position: relative; top: 10px; left: 0; right: 0; bottom: 0; background-image: url(../img/header-back.png); height: 47px; width: 899px; float: righ
.header_background{
display: inline-block;
position: relative;
top: 10px; left: 0; right: 0; bottom: 0;
background-image: url(../img/header-back.png);
height: 47px;
width: 899px;
float: right;
}
它有圆角和渐变
我们将在div中加入其他类似html的文本、更多div元素和图像按钮
有没有一种方法可以让我不使用图像来制作语音泡泡,而是使用html5/css3技术?我们可以通过使用html5+css3来实现无图像背景 有关CSS和CSS技巧,请参见教程。它将帮助您。检查此项 代码如下:
.header_background {
position: relative;
background: #FFF;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwLjUiIHN0b3AtY29sb3I9IiNGRkZGRkYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNDQ0NDQ0MiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZzEpIiAvPjwvc3ZnPg==);
background-image: -webkit-gradient(linear, center top, center bottom, color-stop(50%, #FFFFFF), color-stop(100%, #CCCCCC));
background-image: -webkit-linear-gradient(top, #FFFFFF 50%, #CCCCCC 100%);
background-image: -moz-linear-gradient(top, #FFFFFF 50%, #CCCCCC 100%);
background-image: -ms-linear-gradient(top, #FFFFFF 50%, #CCCCCC 100%);
background-image: -o-linear-gradient(top, #FFFFFF 50%, #CCCCCC 100%);
background-image: linear-gradient(to bottom, #FFFFFF 50%, #CCCCCC 100%);
border: 1px solid #CCC;
padding:10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.header_background:after, .header_background:before {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.header_background:after {
border-color:transparent;
border-right-color: #FFF;
border-width: 5px;
top: 50%;
margin-top: -5px;
}
.header_background:before {
border-color:transparent;
border-right-color:#CCC;
border-width: 6px;
top: 50%;
margin-top: -6px;
}
我用过这个,并做了一些修改
数据:image/svg+xml;base64,…等。
是一个内联SVG图像,在base64上编码。这将在IE9上渲染渐变,IE9不支持任何纯CSS3渐变功能
实际上,它是(FF13+,Opera12+),但由于它比纯CSS3渐变慢,所以您仍然需要其他声明
对于IE8,可以使用渐变过滤器:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#eeeeee',GradientType=0 );
这是非常直接的(GradientType=0
表示垂直,如果将其更改为1
,则会有一个水平渐变)。问题是IE9也支持它!因此,为了避免重叠,您需要使用
在这种情况下,我建议你。。。不在乎IE8。它只会显示一个白色背景(这就是为什么我添加了
background:35;FFF;
作为第一个声明),这是完全好的。您好,为什么您有背景图像:url(数据..在你的.header_背景类中?谢谢@GionaF。我已经设法从你的链接和css代码中混合匹配。最后,我得到了我想要的。我甚至决定不支持IE9。