如何使用CSS HTML实现此效果？

Question

你们能告诉我如何通过略微超出其div（绿色）显示的图像来实现这种图像效果吗？

我不确定这个效果叫什么，因此我无法使用Google进行搜索。

如何使此图像稍微开箱？ 这是图像的链接

    <!doctype html>
    <html>
    <head>
<title>practice site 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">    

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Fontawesome library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="practice2.css">

</head>
<body>
    <div class="container">

<div class="first">
<p>CONVERSIFIC</p>
<p><span class="span1">The 1st</span><br>Business Intelligence Platform<br><span class="span2">for Shopify</span></p>
<p>We show you how to grow your revenue<br><span class="span3">-all you have to do is take action</span></p>

<form>
<input type="text" placeholder="enter your email" name="email">
<input type="submit" name="submit"  value="Add me to Beta">
    </form>
    <p>Join our beta today,be the first to get access to Conversific</p>

</div><!--first div ends -->

<div class="use">
<h1>Why use Conversicif?</h1>
<hr class="firsth">

<div class="box row">
    <div class="col-lg-6">
        <img class="img-responsive" src="graph.jpg" alt="graph">
    </div>
    <div class="col-lg-6">
    <p><strong>Conversific helps you make intelligent decisions to grow your business</strong></p>  
    <p>There are plentfy of platforms that make it easy to capture data and analytics about your ecommerce site.But when it comes to understanding the data you've captured, it's not always clear what's important and where to make changes.</p>
    </div>

</div><!--box div ends -->
<div class="positions">
<h1>How does Conversific work?</h1>
<p>Say goodbye to gathering reports and analyzing data and head straight to decision making </p>
<hr class="second">
<div class="threebox row">
<div class="col-lg-4"><p>Conversific is installed onto your ecommerce store with just one click from your shopify store</p></div>
<div class="col-lg-4"><p>After the installation you just need to install google analytics</p></div>
<div class="col-lg-4"><p>Immediately after you have signed in you see a comprehensive reports overview</p></div>


</div><!--threebox row ends -->
</div><!-- positions div ends-->
</div><!--use div ends -->




<div class="features">
<h1> Features you'll love</h1>
<p>These are the features you are going to love no matter what<br>
    So, is this the end of the paragraph or what or are you gonna keep<br>
    typing till your fingers bleed??</p>

<div class="row">
    <div class="col-lg-6">
<p>ECOMMERCE FOCUS<br><span class="spanf">Decision Focused Dashboards To<br> Supercharge Your Ecommerce Business</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
    <button>Join Now</button></p>
    </div>
    <div class="col-lg-6">

    </div>

</div><!-- row ends -->

<div class="row">
    <div class="col-lg-6"></div>
    <div class="col-lg-6"><p>EASY TO UNDERSTAND<br><span class="spanf">Optimize Your Product & Category<br> Performance</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
    <button>Join Now</button></p></div>

</div><!-- row ends -->

<div class="row">
    <div class="col-lg-6"><p>INCREASE REVENUE<br><span class="spanf">Turbo Boost Your marketing and Find<br> Top Performing Marketing Channels</span><br>
See which marketing channels are the most effective for your business<br>and maximize your return on investment<br>
    <button>Join Now</button></p></div>
    <div class="col-lg-6"></div>

</div><!-- row ends -->

<div class="row">
    <div class="col-lg-6"></div>
    <div class="col-lg-6"><p>ECOMMERCE FOCUS<br><span class="spanf">Decision Focused Dashboards To<br> Supercharge Your Ecommerce Business</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
    <button>Join Now</button></p></div>

</div><!-- row ends -->

</div><!-- features div ends -->
<div class="pillars"></div>
<div class="team"></div>
<div class="end"></div>

</div><!-- container div ends -->




</body>

</html>

Answer 1

这很容易！ 这里的窍门。 如图所示，在悬停时它会稍微脱离包装盒

body {
    background-color: lightblue;
}
#box{
width:100px;
height:100px;
background:red;
margin-top:-100px;
}
#box:hover{

      margin-left:10px;
      margin-top:-110px;
}


</style>
</head>
<body>
<div style="background:black;width:100px;height:100px;"></div>
<div id="box"></div>


</body>

Answer 2

根据您的代码笔，您可能想固定容器的宽度和高度，但是这取决于您，我要做的是

// col-lg-6 or whatever is the container of the image
.col-lg-6 {
    padding: 10px;
}
// play around with the value to achieve the right spacing
.img-responsive {
    margin: -20px -20px 0 0;
}

Answer 3

尝试这个：

.img-responsive { width : 100%; }

Bootstrap的响应式图像类将max-width设置为100％。 这会限制其大小，但不会强制其拉伸以填充大于图像本身的父元素。 您必须使用width属性来强制放大。

如何使用CSS HTML实现此效果？

问题描述

3 个解决方案

解决方案1
4 已采纳 2016-09-03 04:25:48

解决方案2
1 2016-09-03 05:06:01

解决方案3
0 2016-09-03 03:31:13

如何使用CSS HTML实现此效果？

问题描述

3 个解决方案

解决方案1 4 已采纳 2016-09-03 04:25:48

解决方案2 1 2016-09-03 05:06:01

解决方案3 0 2016-09-03 03:31:13

解决方案1
4 已采纳 2016-09-03 04:25:48

解决方案2
1 2016-09-03 05:06:01

解决方案3
0 2016-09-03 03:31:13