不显示背景图像和文本不按图像排列
[英]Background image not displaying and text not in line by image
问题描述
我相信这两个是最简单的新手错误，但我没有足够的经验来修复它们。
出于某种原因，一旦我设置了完整容器的背景，背景就位，但它显示了文本背后的正文背景，我不希望这样。 另一个问题是文本，我不知道如何使它在图像的一侧对齐，就像我的网站计划。
这是问题的图片： 点击查看图片
这就是我想要的样子： 点击查看图片
下面是我的完整代码，我仍然在学习如果有人可以引导我完成正在改变的内容，这将是非常棒的。 如果你发现不良做法或错误，请告诉我，这对我来说非常有用。 谢谢。
@charset "utf-8"; @import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300,300italic,100,100italic,400italic,700italic,900italic); * { margin: 0; padding: 0; } body, header, article, nav, section, footer, aside { display: block; font-family: 'Lato', normal; font-weight: 400; background-repeat: repeat; background-image: url("../img/background-lighter.png"); } /* Classes */ .wrap { max-width: 100%; max-height: 100%; width: 100%; height: auto; margin: auto; } .cell-triple { width: 25%; display: inline-block; padding: 5px 20px; vertical-align: top; } .cell-double { width: 40%; display: inline-block; padding: 5px 10px; vertical-align: top; } .cell-single { width: 100%; display: inline-block; padding: 5px 10px; vertical-align: text-top; } .pre-article { padding: 70px 50px 50px 50px; text-align: center; } .pre-article-image { display: inline-block; padding: 70px 0px 20px 0px; } .article1 { display: inline-block; background-image: url("../img/background-light.png"); } .cell-double-article { width: 40%; display: inline-block; padding: 5px 10px; vertical-align: top; text-align: left; } .shadow { box-shadow: 0px 1px 1px #000000; } .underline { border-bottom: 3px double #8c8b8b; padding-bottom: 5px; margin-left: 30%; margin-right: 30%; } .subheading { font-weight: 700; line-height: 35px; } /* Navigation Bar */ nav { background: rgba(0, 0, 0, 0.7); width: 100%; height: auto; position: fixed; box-shadow: 0px 1px 1px #000000; } nav li a { color: white; text-decoration: none; font-family: 'Lato', normal; font-size: 18px; font-weight: 400; line-height: 50px; } nav li { list-style-type: none; padding-left: 60%; margin-right: 10%; } nav li a:hover:not(.active) { background-color: rgba(0, 0, 0, 0.3); font-size: 130%; -webkit-transition: 0.5s; /* Safari */ transition: 0.7s; } nav .active { background-color: rgba(0, 255, 255, 0.5); } li a { display: block; padding: 0px 10px; float: left; text-decoration: none; vertical-align: text-top; } h1 { font-family: 'Lato', normal; font-weight: 400; } /* */ h2 { font-family: 'Lato', normal; font-weight: 300; }
<!DOCTYPE html> <html> <head> <title>Streamlite | Index</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header id="page-header" class=""> <nav> <ul> <li><a class="active" href="#">ABOUT<a></li> <li><a href="#">SERVICES<a></li> <li><a href="#">PRICING<a></li> <li><a href="#">PORTFOLIO<a></li> <li><a href="#">CONTACT<a></li> </ul> </nav> <img class="shadow" src="img/pc1.jpg" alt="computer" height="100%" width="100%"> </header> <div id="wrapper" class=""> <article id="pre-article" class="pre-article"> <header id="pre-article-header"> <h1 class="underline"> STREAMLITE SPECIALIZES IN DIGITAL MARKETING SOLUTIONS</h1> <h2> We provide a range of online marketing and advertising solutions. </h2> </header> <section> <section class="cell-triple"> <img class="pre-article-image" src="img/icon-bulb.png" alt="computer" height="70" width="70"> <header class="subheading"> PROFESSIONAL DESIGN </header> We offer only the best responsive websites to our clients. By going with Streamlite, you are guaranteed a modern and sleek bespoke website tailored exactly to your needs. </section> <section class="cell-triple"> <img class="pre-article-image" src="img/icon-pc.png" alt="computer" height="70" width="70"> <header class="subheading"> USER FRIENDLY </header> We make sure that your website is easy to use and of exquisite quality. We never fail to neglect the importance of readibility and accessibility. We make sure that the content is suited exactly to your traffic's demographics. </section> <section class="cell-triple"> <img class="pre-article-image" src="img/icon-mobile.png" alt="computer" height="70" width="70"> <header class="subheading"> MOBILE DEVICES </header> We are at a time where your business is no longer stationary and therefore, we utilise modern responsive web development techniques as a standard in order to make sure that your company is accessible on devices such as mobile phones and tablets. </section> </section> </article> <article class="article1"> <img class="" src="img/3devices.jpg" alt="computer" height="25%" width="25%"> <section class="cell-double-article"> <header class="subheading"> RESPONSIVE WEBSITES </header> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet dolor in justo tincidunt convallis. Aenean vitae facilisis felis, vitae mollis est. Cras vehicula felis purus, eu semper ante malesuada sed. Donec leo nisi, rhoncus eget faucibus eget, porttitor vitae lorem. Aenean venenatis orci non sapien tristique luctus. Curabitur at nisl fermentum, sollicitudin mi eu, dignissim tortor. Vivamus sodales. </section> <section class="cell-double-article"> <header class="subheading"> SEO & POSITIONING </header> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet dolor in justo tincidunt convallis. Aenean vitae facilisis felis, vitae mollis est. Cras vehicula felis purus, eu semper ante malesuada sed. Donec leo nisi, rhoncus eget faucibus eget, porttitor vitae lorem. Aenean venenatis orci non sapien tristique luctus. Curabitur at nisl fermentum, sollicitudin mi eu, dignissim tortor. Vivamus sodales. </section> <section class="cell-double-article"> <header class="subheading"> SOCIAL MEDIA ADVERTISING </header> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet dolor in justo tincidunt convallis. Aenean vitae facilisis felis, vitae mollis est. Cras vehicula felis purus, eu semper ante malesuada sed. Donec leo nisi, rhoncus eget faucibus eget, porttitor vitae lorem. Aenean venenatis orci non sapien tristique luctus. Curabitur at nisl fermentum, sollicitudin mi eu, dignissim tortor. Vivamus sodales. </section> <section class="cell-double-article"> <header class="subheading"> CONTINUED SUPPORT </header> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet dolor in justo tincidunt convallis. Aenean vitae facilisis felis, vitae mollis est. Cras vehicula felis purus, eu semper ante malesuada sed. Donec leo nisi, rhoncus eget faucibus eget, porttitor vitae lorem. Aenean venenatis orci non sapien tristique luctus. Curabitur at nisl fermentum, sollicitudin mi eu, dignissim tortor. Vivamus sodales. </section> </article> </div> <footer id="footer" class=""> </footer> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2016-07-13 17:58:15
添加CSS
.article1 img{float:left;}
更改文件中的以下css
.cell-double-article {
width: 35%;
display: inline-block;
padding: 5px 10px;
vertical-align: top;
text-align: left;
float:left;
}
滚动文本时在背景中显示图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.