如何解决背景img的问题以及如何在BOOTSTRAP

时间:2019-05-07 10:02:17

标签: html css twitter-bootstrap

我的引导程序代码有2个问题: -我无法放置背景(可以在此站点上使用背景图片,但是不能在家!!) -我无法将文字环绕在图片上

我尝试了此解决方案,但对我不起作用 Wrap text around bootstrap image

.site-heading .site-heading-upper {
  display: block;
  font-size: 2rem;
  font-weight: 800;
}

.page-section {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

body{
  margin:0;
  padding:0;
  background: url('https://wallpapersite.com/images/wallpapers/yosemite-valley-1680x1050-yosemite-national-park-california-5223.jp');
  background-size: cover;
}

.text-justify {
  text-align: justify;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/style.css">


    <title>Chrysallid</title>
  </head>
  <body>
  	<div id="intro" class="view">
  		<div class="full-bg-img"></div>
  	</div>

  		<div class="container d-none d-md-block" align="center">
	    	<img src="img/logoC.png" width="25%">
	    </div>

  	

   		<div class="container-fluid">
			<div class="container">
				<div class="row">
					<div class="col-xs-12 col-md-5">
						<img class="img-fluid mb-3 mt-3 rounded" src="http://images.8tracks.com/cover/i/009/320/238/hands-keys-music-piano-play-Favim-8937.png" alt="" width="100%">
					</div>
					<div class="col-xs-12 col-md-7">
						<div class="row">	
							<div class="col-sm-6">
								<h2>titre</h2>
							</div>
						</div>				
						<div class="col-xs-12 text-justify">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
							tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
							consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
							cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
							proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
							tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
							consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
							cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
							proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
						</div>
					</div>
				</div>
			</div>
		</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

非常感谢您能为我提供帮助

1 个答案:

答案 0 :(得分:0)

我认为可以使用白色来更改文本的颜色

.site-heading .site-heading-upper {
  display: block;
  font-size: 2rem;
  font-weight: 800;
}

.page-section {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

body{
  margin:0;
  padding:0;
  background: url('https://wallpapersite.com/images/wallpapers/yosemite-valley-1680x1050-yosemite-national-park-california-5223.jp');
  background-size: cover;
}

.text-justify {
  text-align: justify;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/style.css">


    <title>Chrysallid</title>
  </head>
  <body>
  	<div id="intro" class="view">
  		<div class="full-bg-img"></div>
  	</div>

  		<div class="container d-none d-md-block" align="center">
	    	<img src="img/logoC.png" width="25%">
	    </div>

  	

   		<div class="container-fluid">
			<div class="container">
				<div class="row">
					<div class="col-xs-12 col-md-5">
						<img class="img-fluid mb-3 mt-3 rounded" src="http://images.8tracks.com/cover/i/009/320/238/hands-keys-music-piano-play-Favim-8937.png" alt="" width="100%">
					</div>
					<div class="col-xs-12 col-md-7">
						<div class="row">	
							<div class="col-sm-6">
								<h2>titre</h2>
							</div>
						</div>				
						<div class="col-xs-12 text-justify text-white">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
							tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
							consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
							cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
							proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
							tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
							consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
							cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
							proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
						</div>
					</div>
				</div>
			</div>
		</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

相关问题