不使用 url 的 CSS 背景

标签 css

有没有办法在 CSS 中包含背景而不使用 url()

例如,我不能这样做:

#blah {
    background:url("either image or image data");
}

有没有一种解决方法可以实现相同的目的但不使用关键字“url”(禁止使用“url”一词。

最佳答案

您可以使用 <img>标记为背景图片,CSS 中不需要 URL。像这样:

HTML

<img src="image.jpg" class="bg">
<div id="page-wrap">
</div>

CSS

img.bg {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px) {
    img.bg {
        left: 50%;
        margin-left: -512px;
    }
}

有关更多信息和演示,请参见此处:http://css-tricks.com/perfect-full-page-background-image/

关于不使用 url 的 CSS 背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22102052/

相关文章:

css - 强制 <a> 标签与父 <li> 标签具有相同的高度

html - 如何在 CSS 中用垂直线分隔的字形和列列表?

html - Firefox 和 IE8 中奇怪的居中问题

css - Bootstrap 中的垂直菜单

css - 在同一规则中混合百分比和像素是否存在问题?

jquery - 从 Kendo Grid 获取数据

javascript - 使 Chart.js Canvas 在可调整大小的 div 内响应

javascript - 输入 `type=image` onclick 解决方案有效,但为什么呢?

css - 让子 div 拉伸(stretch)到具有可变宽度的父 div 的剩余宽度

html - CSS 中的垂直对齐文本