如何使用css html实现这一效果？
如何使用css html实现这一效果？
提问于 2016-09-03 03:19:48
你们中有谁能告诉我如何实现这个图像效果，图像被稍微显示出它的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>回答 3
Stack Overflow用户
回答已采纳
发布于 2016-09-03 04:25:48
这很容易！这里有窍门。在悬停时，它会稍微走出它的盒子，如图所示
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>Stack Overflow用户
发布于 2016-09-03 05:06:01
根据您的代码，您可能希望确定容器的宽度和高度，但这取决于您，我要做的是
// 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;
}Stack Overflow用户
发布于 2016-09-03 03:31:13
试试这个：
.img-responsive { width : 100%; }
引导程序的响应图像类将最大宽度设置为100%。这限制了它的大小，但并不强迫它拉伸来填充大于图像本身的父元素。您必须使用width属性来强制升级。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39302919
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号