Question

我正在使用HTML5和CSS来设计页面。以下代码块是否会将指定的图像设置为background-image两个<div>类.headarea和.leo？

<div  class="headarea" style="background-image:url('C:\Users\Shanmugam\Desktop\Prathab\background\b (12).jpg)';width:100%">
    <div class="leo">
        <img src="C:\Users\Shanmugam\Desktop\Prathab\leo.png" width=90 height=95></img>
    </div>
</div>

Answer 1

没有。您无法直接从计算机的硬盘驱动器中引用文件 - 请尝试将其上传到http://imgur.com等网站并从中引用图片。大多数人建议不要在文件名中使用空格。

你在这里犯了一个错误：

background-image:url('C:\Users\Shanmugam\Desktop\Prathab\background\b (12).jpg)';width:100%

您不需要引号：

background-image:url('C:\Users\Shanmugam\Desktop\Prathab\background\b (12).jpg');width:100%

此外，根据您发布的内容，课程headarea和leo不做任何事情。你可以删除它们。

Answer 2

<img src="C:\Users\Shanmugam\Desktop\Prathab\leo.png" width=90 height=95></img>

到

<img src="C:\Users\Shanmugam\Desktop\Prathab\leo.png" width=90 height=95>

结束标记的IMG 不需要

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.headarea{
    min-height: 380px;
    background: url('http://logovoi2014.ru/wp-content/uploads/2015/01/TM-Priroda.jpg') no-repeat center top;
   position: relative;
    -webkit-background-size: cover;
		-moz-background-size: cover;
			background-size: cover;
}
.leo img{
    border: 2px solid #ccc;
    position: absolute; top: 50%; left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
}

<div  class="headarea">
    <div class="leo">
        <img src="http://catoftheday.com/archive/2014/AprilImages/10s.jpg" alt="" />
    </div>
</div>

使用div中的样式设置背景图像

2 个答案: