如何修复背景img的问题，并在BOOTSTRAP中的img周围包装文本
[英]How to fix problems with background img and wrap text around img in BOOTSTRAP
问题描述
I have 2 issues with my bootstrap code: - I can't put a background (ok wtf the background image work on this site, but not at home !?) - I can't wrap my text around an image 
我的引导代码有2个问题： - 我不能放一个背景（ok wtf背景图片在这个网站上工作，但不在家里！？） - 我无法将文字包裹在图像周围
I tried this solution but it doesn't work for me Wrap text around bootstrap image 我尝试了这个解决方案，但它不适合我在bootstrap图像周围包装文本
.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>
Thanks a lot if you can help me 非常感谢，如果你能帮助我的话
1 个解决方案
解决方案1
0 2019-05-07 10:11:28
i think to use text-white to change color of text 我认为使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在 CSS 中的 img 周围环绕文本？ - How to wrap text around an img in CSS?
带有背景img的文字换行 - Text Wrap with a background-img
Bootstrap List组项环绕img - Bootstrap List group item wrap around img
如何将图片标签包裹在 img 标签周围 - How to wrap picture tag around an img tag
如何在div中使文本环绕在另一个包含img和文本的div中 - How do you make a text in a div wrap around another div with img and text in it
如何修复未显示的背景img - How to fix a background img that isn't showing
如何修复“将文本悬停在图像上，文本保持其原始位置，并且img在背景中发生变化” - How to fix 'Hover text to image, text keeps it's original position and img changes in background'
背景图Div（Twitter引导程序） - Background Img Div (Twitter Bootstrap)
具有背景img问题的Bootstrap容器 - Bootstrap container with background img issue
如何在 Bootstrap 5 中将文本环绕在图像周围 - How to wrap text around image in Bootstrap 5
相关标签