html - 如何将图像设置为 div 的背景并将其 "ZOrder"设置为 0?

标签 html css image background-image src

我想将图像设置为 div 中的背景(并覆盖整个内容),并且仍然能够“在其上书写”(在背景图像上添加文本)。我尝试将其添加到 CSS:

background-image: "http://www.replaster.com/sitebuilder/images/blueWhiteSwirl-758x109.jpg"

...但它什么也没做。

我不成功的扭动是:

HTML

<div class="CoolTurlockSwimmingPool"> 
    <span>Bla</span>
    <img src="http://www.replaster.com/sitebuilder/images/blueWhiteSwirl-758x109.jpg"></img>Blee
</div>

CSS

.CoolTurlockSwimmingPool {
    background-color: Blue;
    color: WHite;
    font-family: "Segoe UI Light", sans-serif;
}

jsfiddle 在这里:http://jsfiddle.net/X35Ap/

最佳答案

需要在url()中包裹图片的路径

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>answer</title>
    <style>
        .CoolTurlockSwimmingPool {
            background-color: Blue;
            color: WHite;
            font-family: "Segoe UI Light", sans-serif;
            background-image: url("http://www.replaster.com/sitebuilder/images/blueWhiteSwirl-758x109.jpg");
        }
    </style>
</head>
<body>
    <div class="CoolTurlockSwimmingPool">
        <span>Bla</span>
        Blee
    </div>
</body>
</html>

关于html - 如何将图像设置为 div 的背景并将其 "ZOrder"设置为 0?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19600834/

相关文章:

HTML 表单字段和边距显示

html - 如何修复 div 上的图像?

ios - 如何找出给定 UIImage 大小的最大可能文件大小是多少?

html - 在div和页脚之间没有空白的div中添加背景图像

javascript - 打开/关闭菜单单击时仅使用 javascript 不使用 jquery

Javascript 琐事 : check for equality against the empty object

javascript - 如何将 mouseenter 监听器添加到 xtemplate 内的 div

javascript - stopPropagation 未按预期工作

html - 优化文本渲染 - CSS

html - 如何让2个绝对div居中