容器外的图像只有一侧 [英] image outside container only one side

查看：28
本文介绍了容器外的图像只有一侧的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Bootstrap 4.我有一个带有 div 的容器，它位于右侧的容器之外.是否可以对图片 div 做同样的事情?我是用伪元素 :after 和另一种"背景颜色来做的.(如果你不明白我想要实现什么

body {溢出-x:隐藏；}.盒子 {背景色:#F0F6FB；填充:120px 20px；右边距:0；左边距:自动；边距顶部:-125px；位置:相对；边框半径:50px 0px 0px 50px；}.box:在{之后内容: '';位置:绝对；顶部:0；底部:0；左:80%；右:-3000px；背景:#F0F6FB；z-索引:-1；}.box-image {背景:网址(https://images5.alphacoders.com/456/456536.jpg)；高度:230px；边框半径:0px 50px 50px 0px；边距顶部:60px；背景尺寸:封面；背景位置:50% 50%；z-索引:1；位置:相对；}

<html lang="zh-cn"><头><!-- 必需的元标记--><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcFAgJinGinAmFcFAGORIGINSIGINX"><身体><br/><br/><br/><br/><br/><br/><br/><br/><div class="容器"><div class="box-image">&nbsp;</div><div class="box">&nbsp;

<br/><br/><br/><br/><br/><br/><br/><br/><!-- 首先是 jQuery，然后是 Popper.js，然后是 Bootstrap JS --><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5Kkn"cross/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39jQxfakfakvskor匿名"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjPVCUar5"7xSfFWpi1MquVdAyjPVCUar5"7/脚本></html>

解决方案

希望能帮到你:

body {溢出-x:隐藏；}.盒子 {背景色:#F0F6FB；填充:120px 20px；右边距:0；左边距:自动；边距顶部:-125px；位置:相对；边框半径:50px 0px 0px 50px；}.box:在{之后内容: '';位置:绝对；顶部:0；底部:0；左:80%；右:-3000px；背景:#F0F6FB；z-索引:-1；}.box-image {背景:网址(https://images5.alphacoders.com/456/456536.jpg)；高度:230px；边框半径:0px 50px 50px 0px；边距顶部:60px；背景尺寸:封面；背景位置:50% 50%；z-索引:1；位置:相对；宽度:80%；}

<html lang="zh-cn"><头><!-- 必需的元标记--><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcFAgJinGinAmFcFAGORIGINSIGINX"><身体><br/><br/><br/><br/><br/><br/><br/><br/><div class="box-image">&nbsp;</div><div class="容器"><div class="box">&nbsp;

<br/><br/><br/><br/><br/><br/><br/><br/><!-- 首先是 jQuery，然后是 Popper.js，然后是 Bootstrap JS --><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5Kkn"cross/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39jQxfakfakvskor匿名"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjPVCUar5"7s/脚本></html>

im using Bootstrap 4. I have container with div which is outside of container on right side. Is it possible to do the same with a picture div? I did it with pseudo-element :after and "another" background color. (If you don't understand what i want to achieve 

body {
  overflow-x: hidden;
}
.box {
     background-color: #F0F6FB;
    padding: 120px 20px;
    margin-right: 0;
    margin-left: auto;
    margin-top: -125px;
    position: relative;
    border-radius: 50px 0px 0px 50px;
}

 .box:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 80%;
    right: -3000px;
    background: #F0F6FB;
    z-index: -1; 
    }
    
    .box-image {
    background: url(https://images5.alphacoders.com/456/456536.jpg);
    height: 230px;
    border-radius: 0px 50px 50px 0px;
    margin-top: 60px;
    background-size: cover;
    background-position: 50% 50%;
    z-index: 1;
    position: relative;
}

<!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">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
  <br/><br/> <br/><br/> <br/><br/> <br/><br/>
     <div class="container">
       <div class="box-image">&nbsp;</div>
       <div class="box">
         &nbsp;
       </div>
     </div>
     <br/><br/> <br/><br/> <br/><br/> <br/><br/>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

解决方案

Hope this could help:

body {
  overflow-x: hidden;
}
.box {
     background-color: #F0F6FB;
    padding: 120px 20px;
    margin-right: 0;
    margin-left: auto;
    margin-top: -125px;
    position: relative;
    border-radius: 50px 0px 0px 50px;
}

 .box:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 80%;
    right: -3000px;
    background: #F0F6FB;
    z-index: -1; 
    }
    
    .box-image {
    background: url(https://images5.alphacoders.com/456/456536.jpg);
    height: 230px;
    border-radius: 0px 50px 50px 0px;
    margin-top: 60px;
    background-size: cover;
    background-position: 50% 50%;
    z-index: 1;
    position: relative;
	width: 80%;
}

<!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">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  
   <body>
  <br/><br/> <br/><br/> <br/><br/> <br/><br/>
	   <div class="box-image">&nbsp;</div>
     <div class="container">
      
       <div class="box">
         &nbsp;
       </div>
     </div>
     <br/><br/> <br/><br/> <br/><br/> <br/><br/>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

这篇关于容器外的图像只有一侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆