Question

所以我只是对HTML和CSS有一些乐趣，我试图在图像上叠加一些文字。

我被教导的方式是给图像一个div为自己，并将其设置为背景图像。然后你可以直接输入它。

但是，我希望div的背景图像符合我已编写的一些CSS，告诉图像缩放到页面的宽度。

有没有办法将CSS应用到背景图片？或者我应该选择另一条路线？

提前致谢，

雨

代码：

＆＃13;

  body {
    	background-color: #d0d0d5;
    }
    
    
    #pageWrapper {
    	margin-left: -10px;
    	margin-top: -15px;
    	margin-right: -200px;
    	background-color: #9b9a9d;
    	height: 1500px;
    	width: 100%;
    }
    
    #header {
    	font-family: Lato;	
    	font-weight: bold;
    	background-color: #ffffff;
    	height: 70px;
    	width: 100%;
    	border-bottom: 2px solid #E8E8F0;
    }
    
    	.links {
    		list-style-type: none;
    		font-size: 14px;
    		color: #000;
    	}
    
    	.linkLeft {
    		float: left;
    		display: inline-block;
    		line-height: 55px;
    		text-decoration: none;
    		padding-right: 20px;
    		color: #000;
    		text-transform: uppercase;
    	}
    
    	.linkRight {
    		float: right;
    		display: inline-block;
    		line-height: 55px;
    		text-decoration: none;
    		padding-left: 20px;
    		color: #000;
    		text-transform: uppercase;
    	}
    
    	#link5 {
    		padding-right: 40px;
    
    	}
    
    #imageWrapper {
    	max-width: 100%;
    	height: auto;
    	width: auto\9; /* ie8 */
    	}
    	
    	
    	#jumbotron {
    	    max-width: 100%;
    	    height: auto;
    	    width: auto\9; /* ie8 */
    	    background-image: url(img/Canadian-Rockies-Mountains.jpg);
    	    
    	}

＆＃13;

 <!DOCTYPE html>

<html lang=en>

	<head>
		<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
		<link href="main.css" rel="stylesheet" type="text/css" />
		<title></title>
	</head>

	<body>
		<div id="pageWrapper">
			
			<div id="header">
				<ul class="links"><li><a href="#" class="linkLeft">Home</a></li>
					<li><a href="#" class="linkLeft">Browse</a></li>
					<li><a href="#" class="linkRight" id="link5">Help</a></li>
					<li><a href="#" class="linkRight">Log In</a></li>
					<li><a href="#" class="linkRight">Sign Up</a></li></ul>

			</div> <!--header END-->

			<div id="imageWrapper">
				<!--<div id="imageText">
					<h1>Discover the Canadian Rockies.</h1>
					<p>Book a trip to Canada today, guy.</p>
				</div>-->
				<div id="jumbotron"></div>
				<!--Original code used to place image before I wanted text overlay follows-->
				<!--<img id="jumbotron"src="img/Canadian-Rockies-Mountains.jpg" />-->
			</div>

		</div> <!--pageWrapper END-->
	</body>

</html>

＆＃13;

Answer 1

看这里：

http://www.w3schools.com/css/css3_backgrounds.asp http://www.w3schools.com/css/css_background.asp

这些属性（如background-size）将与具有background-image集的div相关。要使div本身填充其父级，请在div的类

中设置width: 100%

Answer 2

在div

中应用css的简单示例

CSS

   .header-shadow{
    background-image: url('../images/header-shade.jpg');
    background-color:red;
    height:50px;
}

JsFiddle

Answer 3

你可以尝试这样的事情：

<!DOCTYPE html>
<html>
<head>
<style>
div  {
    background-image: url("http://www.w3schools.com/cssref/paper.gif");
    width: 100%;
}
</style>
</head>
<body>
<div>
<h1>Hello World!</h1>
</div>
</body>
</html>

Answer 4

如果我正确地阅读了您的问题，background-size: cover会强制图片按照您想要的方式展开。我修改了您的代码，这是您正在寻找的效果吗？

＆＃13;

  body {
    	background-color: #d0d0d5;
    }
    
    
    #pageWrapper {
    	margin-left: -10px;
    	margin-top: -15px;
    	margin-right: -200px;
    	background-color: #9b9a9d;
    	height: 1500px;
    	width: 100%;
    }
    
    #header {
    	font-family: Lato;	
    	font-weight: bold;
    	background-color: #ffffff;
    	height: 70px;
    	width: 100%;
    	border-bottom: 2px solid #E8E8F0;
    }
    
    	.links {
    		list-style-type: none;
    		font-size: 14px;
    		color: #000;
    	}
    
    	.linkLeft {
    		float: left;
    		display: inline-block;
    		line-height: 55px;
    		text-decoration: none;
    		padding-right: 20px;
    		color: #000;
    		text-transform: uppercase;
    	}
    
    	.linkRight {
    		float: right;
    		display: inline-block;
    		line-height: 55px;
    		text-decoration: none;
    		padding-left: 20px;
    		color: #000;
    		text-transform: uppercase;
    	}
    
    	#link5 {
    		padding-right: 40px;
    
    	}
    
    #imageWrapper {
    	max-width: 100%;
    	height: auto;
    	width: auto\9; /* ie8 */
background-image: url(http://placekitten.com/g/200/300);
background-size: cover;
height: 200px;
    	}

＆＃13;

 <!DOCTYPE html>

<html lang=en>

	<head>
		<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
		<link href="main.css" rel="stylesheet" type="text/css" />
		<title></title>
	</head>

	<body>
		<div id="pageWrapper">
			
			<div id="header">
				<ul class="links"><li><a href="#" class="linkLeft">Home</a></li>
					<li><a href="#" class="linkLeft">Browse</a></li>
					<li><a href="#" class="linkRight" id="link5">Help</a></li>
					<li><a href="#" class="linkRight">Log In</a></li>
					<li><a href="#" class="linkRight">Sign Up</a></li></ul>

			</div> <!--header END-->

			<div id="imageWrapper">
				<div id="imageText">
					<h1>Discover the Canadian Rockies.</h1>
					<p>Book a trip to Canada today, guy.</p>
				</div>
			</div>

		</div> <!--pageWrapper END-->
	</body>

</html>

＆＃13;

Answer 5

这是您覆盖整个屏幕并使其适应屏幕尺寸的方式。

html, body {
        position:relative;
        height: 100%;
        background:url('yoururl')no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
    }

我可以将CSS应用于<div>的背景图像吗？</div>

5 个答案:

CSS

JsFiddle