文章/答案/技术大牛

发布

社区首页 >问答首页 >如何用html5/css3技术替换图片

问如何用html5/css3技术替换图片
EN

Stack Overflow用户

提问于 2012-09-26 15:53:27

回答 2查看 427关注 0票数 0

看这张图

或者在这里http://cl.ly/image/0a2R2V0C1y2l

我们有一个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: right;   
}

它有圆角和渐变。

我们将在div中放入其他html，比如文本、更多的div元素和图像按钮。

有没有办法让我不用图片做演讲气泡，而是用html5/css3技术？

image

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-09-26 16:13:16

检查此live demo

下面是代码：

.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;
}

我已经使用了这个online gradient maker tool，css arrow please，并做了一些修改。

data:image/svg+xml;base64,...etc...是一个内联的SVG图像，编码在base64上。这将在不支持任何纯CSS3渐变功能的IE9上渲染渐变。

实际上它是is supported by other modern browsers (FF13+，Opera12+)，但是作为Lea Verou reported，它比纯CSS3渐变慢，这就是为什么你仍然需要其他声明的原因。

对于IE8，可以使用渐变滤镜：

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#eeeeee',GradientType=0 );

这非常简单(GradientType=0的意思是垂直的，如果你把它改成1，你会得到一个水平的渐变)。问题是IE9也支持它！因此，为了避免重叠，您需要使用conditional comments。

在这种特殊情况下，我建议你...不去关心IE8的事。它只会显示一个白色背景(这就是我添加background:#FFF;作为第一个声明的原因)，这完全没问题。

票数 1

Stack Overflow用户

发布于 2012-09-26 16:01:26

我们可以使用HTML5+CSS3来实现无图像背景。

有关bubble和gradient background CSS技巧，请参阅教程。它会帮到你的。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12597049

复制

相似问题

问如何用html5/css3技术替换图片
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用html5/css3技术替换图片EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用html5/css3技术替换图片
EN