我在标题上显示整个图像时遇到问题。我尝试了包含和覆盖,没有任何一周,任何帮助将不胜感激。这是我的问题和代码的截图。
body {
font-family: 'Roboto';
color:#464655;
background-color: #E5E0CD;
outline:none;}
a {text-decoration: none;}
h1{
font-family:"SummerHearts-Regular";
font-size:30px;
text-align:center;
letter-spacing:16px;}
#cd-intro {
background: url(trees.jpg) no-repeat center center fixed;
z-index: 2;
margin: 0 auto;
display:block;
background-size:100% 170px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
#cd-intro #cd-intro-tagline {
width: auto;
width:90%;
position:relative;
max-width: 1170px;
margin: 0 auto;
text-align: center;
padding-top: 20px;}
@media only screen and (min-width: 1170px) {
#cd-intro {
height: 170px;
}
#cd-intro #cd-intro-tagline {
padding-top: 5px;
}
#cd-intro input {
font-size: 50px;
}
}
.cd-btn {
display: inline-block;
padding: 1em 1.8em;
background-color:#D23C69;
border-radius: 5px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #E5E0CD;
}
<html>
<body>
<header>
<section id="cd-intro">
<div id="cd-intro-tagline">
<img src="C:\Users\Maryam\Desktop\TravelGeni\Trip\css\Travel Geni.png" alt="Mountain View" style="width:110px;left:-80px;top:0;position:absolute;">
<h1 style="top:0;">Edit Trip</h1>
<a href="" class="cd-btn">Delete</a>
<a href="" class="cd-btn">Mark Complete</a>
</div> <!-- #cd-intro-tagline -->
</section> <!-- #cd-intro -->
</header>
</body>
</html>
答案 0 :(得分:1)
图像可以设置为背景,其背景大小属性可以设置为覆盖。
body {
font-family: 'Roboto';
color: #464655;
background-color: #E5E0CD;
outline: none;
}
a {
text-decoration: none;
}
h1 {
font-family: "SummerHearts-Regular";
font-size: 30px;
text-align: center;
letter-spacing: 16px;
}
#cd-intro {
background: url(http://www.gettyimages.in/gi-resources/images/Embed/new/embed2.jpg) no-repeat;
z-index: 2;
margin: 0 auto;
display: block;
background-size: 100% 170px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#cd-intro #cd-intro-tagline {
width: auto;
width: 90%;
position: relative;
max-width: 1170px;
margin: 0 auto;
text-align: center;
padding-top: 20px;
}
@media only screen and (min-width: 1170px) {
#cd-intro {
height: 170px;
}
#cd-intro #cd-intro-tagline {
padding-top: 5px;
}
#cd-intro input {
font-size: 50px;
}
}
.cd-btn {
display: inline-block;
padding: 1em 1.8em;
background-color: #D23C69;
border-radius: 5px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #E5E0CD;
}
<body>
<header>
<section id="cd-intro">
<div id="cd-intro-tagline">
<h1 style="top:0;">Edit Trip</h1>
<a href="" class="cd-btn">Delete</a>
<a href="" class="cd-btn">Mark Complete</a>
</div>
<!-- #cd-intro-tagline -->
</section>
<!-- #cd-intro -->
</header>
</body>
答案 1 :(得分:0)
不确定你真正想要和不想要的是什么,但是在你的代码中......:
background-size:100% 170px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
...最后一行覆盖第一行:相同的参数,不同的值 - &gt;后来有人覆盖了之前的一个
如果你的问题是“封面”背景的位置,你可能想在这里改变一些东西:
background: url(trees.jpg) no-repeat center center fixed;
此center center
是位置,因此如果您希望背景图像在顶部或底部对齐,请将第二个“中心”(即垂直位置)更改为“顶部”或“底部”,或者到像素值。