html - 如何解决 BOOTSTRAP 中背景图片和文字环绕图片的问题-6ren

html - 如何解决 BOOTSTRAP 中背景图片和文字环绕图片的问题

转载作者：行者123 更新时间：2023-11-28 00:00:24

我的 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>

如果你能帮助我，非常感谢

最佳答案

我想用text-white来改变文字的颜色

.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>

关于html - 如何解决 BOOTSTRAP 中背景图片和文字环绕图片的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56020104/

文章推荐： css - PDF - @Page CSS - 在所有页面中添加页边距

文章推荐： css - 我的动画(悬停)不工作，我不明白为什么

文章推荐： php - 调整窗口大小时如何修复侧边栏？

文章推荐： html - 如何在特定的

标签中定义外部 css 文件

ada - 如何将枚举转换为整数以处理溢出/环绕？
我正在学习 ada 并且我正在尝试为枚举实现附加重载。基本上我希望能够向 Day 类型添加一个 Integer 并获得生成的 Day 值。所以星期一 + 2 => 星期三。这是我的简化代码: pr
PyCharm 环绕 "print"
Pycharm 具有“包围”代码片段的功能。有一些已经设置好的功能: 我想添加print()(使用python3)，我该怎么做？最佳答案 AFAIU，您可以为此定义自己的“实时”模板。定义实时模板
ios - 枚举NSArray从给定索引开始以两种方式搜索(环绕)
例。我有一个包含15个对象的数组。我想从给定的索引开始枚举。假设从索引5开始，然后是上方的索引，下方，上方，下方等的索引...我确实希望它绕起来。因此，在我的示例中，索引的顺序将是这样。 5、6、4
UIPickerView 环绕 Swift 2
我需要帮助创建 UIPickerView 来环绕选项。因此，选择器不是这样的: 我希望它看起来像这样(没有“min”): 我到处找，但找不到用 Swift 2.0 实现的方法谢谢! 最佳答案以下是有
iPhone:UITextView 环绕 UIImage？
如何让 UITextView 将其文本包裹在 UIImage 周围，如下图所示？图像大小不一定是事先已知的。最佳答案 IOS 7 及以上版本: UIBezierPath * imgRect = [
iphone - 让 UIScrollView 环绕
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: UIScrollView. Any thoughts on implementing “infinite” scro
opengl - 如何让 texelFetchOffset 环绕？
我像这样创建纹理: this->width = width; this->height = height; glGenFramebuffers(1, &framebuffer); glBindFram
twig - PhpStorm 环绕/环绕选择？
在编码和模板化中，我经常需要换行文本的特定部分。是否有任何快捷方式可以包装当前选择，例如: Hello World "Hello World" Hello World {{ trans 'Hello
javascript - 环绕 Highcharts 点
我正在做一个项目，我们有一些从数据库中填充的 Highcharts 图表；其中之一是散点图，我们需要包围放置在图表外部区域的点。我们需要像 this 这样的图表但是我们需要散点图外部点周围的区域；使
jquery - 使背景图像 div 环绕
我有一个 500 像素高和 50 像素宽的 jpg。它由 10 个 50px x 50px 的正方形组成，每个正方形包含一个从 1 到 10 的数字(1 在图像顶部，10 在底部)。 (jpg 在这里
html - 停止 DIV 环绕...>
我正在尝试为那些了解它的人创建一个类似 Microsoft Project 的元素控件。我有一个Container Div，然后有两个子容器如下: 每个子容器都有很多内部 div，例如，我的第一个子
jquery - div 环绕 float
我有 4 个 div，一个我想向左浮动，视频播放器(加载了 jquery)，另一个包含一些将向右浮动的帮助/提示文本。这两个应该排在顶部。在视频播放器下方将是一个 div 内的表格。当有人点击表格中
javascript - 为什么我的棋盘不使用 flexbox 环绕？
这个问题在这里已经有了答案: Proper use of flex properties when nesting flex containers (1 个回答) 关闭 4 年前。
css - 环绕 float 元素的自定义列表项背景
我在使用自定义列表图像时遇到问题/其中图标隐藏在列表环绕的 float 元素后面。 http://jsfiddle.net/V8evM/ HTML This is list item n
Android textview 环绕 textview
是否可以将 textview 环绕在 textview 周围，第二个 textview 将环绕到第一个 textview 下的下一行？例如: 我尝试过使用 android:layout_weig
html - 环绕 float 时避免悬挂文本
图片最能说明问题: 它只是一个 float: left 图像 ( http://jsbin.com/itihes/1 )。有什么方法可以防止纯 CSS 中的动态文本出现这个问题吗？我确实希望文本换行，
c - 环绕 C 中有符号和无符号变量的解释？
我在 C 规范中读到一点，无符号变量(特别是 unsigned short int)在整数溢出时执行一些所谓的环绕，尽管我在带符号的变量上找不到任何东西，除了我留下了未定义的行为。我的教授告诉我，
css - 环绕 div 的文本
如果您想要容器底部的 div，如何让文本环绕 div？我可以弄清楚如何让文本环绕在 div 上，只要它在顶部，但如果我尝试将它推到页面底部，文本要么不会'不要继续跨越 div 的顶部，否则 div
javascript - 使用 mod 环绕
假设数组的长度为 1000。我正在尝试创建一种简单的方法来遍历存储在数组中的图像路径而不会越界。当涉及到单击“下一步”按钮以增加数组索引时，下面的方法使用模数很好地处理了环绕，但当我必须减少并从索引中
vim - 带 * 的双 vim 环绕
假设我的光标在单词 word 内.使用 vim-surround，输入序列 ysiw*将替换 word与 *word* . 问题:是否有我可以输入的单个序列来代替生成 **word** (即，单词加粗

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何解决 BOOTSTRAP 中背景图片和文字环绕图片的问题