Question

你们中的任何人都可以告诉我如何实现这种图像效果，图像显示在其div之外（绿色）??

我不确定这个效果是什么，因此我无法使用谷歌搜索此内容。

如何将这张图片略微放在它的盒子里？这是图像

的链接

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

基于您的codepen，您可能想要修复容器的宽度和高度，但这取决于您，我将做的是

// 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 个答案: