我正在尝试实现我正在显示的图像显示在计算机屏幕中的效果。所以基本上,屏幕上会有一个计算机屏幕和我的图像的图像。
我要做的是使用photoshop将整个内容显示为单个图像。但这不是真正的可扩展性。我的另一个想法是创建计算机屏幕的CSS边框图像,但这听起来有点涉及,我正在寻找一个快速的事情。
我知道我已经在很多网站上看到了这种效果(但是我记不起任何检查来源的名称),我真的觉得可能有一个现成的解决方案来实现这一点。这样一个现成的解决方案是否存在,或者您能想到一种简单的方法来实现这一目标吗?
答案 0 :(得分:1)
创建一个计算机图像说(500x500)px,其屏幕透明(空白),并将其导出为png,透明度为。
然后导出另一张分辨率相同的图像。
然后你的位置将它们放在一起。
#computer_image{
position:relative;
z-index:100; /*To keep computer screen above use positive value*/
}
#computer_screen{
position:relative;
z-index:50;
/*Use top/left/right/bottom to place image on computer screen*/
}
答案 1 :(得分:0)
这可以通过使用CSS定位方法来实现。这是一个你可以使用的例子。
.project-widget-container {
position: relative;
margin-bottom: 30px;
}
.project-widget-container section {
position: relative;
padding-top: 20px;
margin-left: 10px;
}
.project-widget-container section:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 20px;
bottom: 0;
border: 1px solid #eee;
z-index: -1;
}
.project-widget-container section:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 20px;
bottom: 0;
box-shadow: -5px -5px 5px -5px #eee, 5px -5px 5px -5px #eee;
z-index: -1;
}
.project-title {
border-left: 2px solid #660061;
padding-left: 20px;
}
.project-title h4 {
color: #660061;
font-weight: bold;
font-size: 1.4em;
line-height: 50px;
}
.project-excerpt {
color: #666;
font-size: 1.1em;
padding: 20px 20px 0 20px;
line-height: 1.2em;
height: 60px;
}
img.imac {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
right: 0;
}
.project-image-container {
position: relative;
left: -10px;
padding-top: 85%;
}
.thumb img {
width: 50%;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -25%;
}
.thumb {
position: absolute;
z-index: 1;
bottom: 18%;
left: 0;
right: 0;
}

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 project-widget-container">
<section>
<div class="project-title">
<h4>Project 1</h4>
</div>
<div class="project-excerpt">
Lorem <a href="#">Test</a> dolor sit amet, consectetur adipiscing elit.
</div>
<div class="project-image-container">
<div class="thumb">
<img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
</div>
<img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
</div>
</section>
</div>
<!-- col -->
<div class="col-sm-6 col-md-3 project-widget-container">
<section>
<div class="project-title">
<h4>Project 1</h4>
</div>
<div class="project-excerpt">
Lorem <a href="#">Test</a> dolor sit amet, consectetur adipiscing elit.
</div>
<div class="project-image-container">
<div class="thumb">
<img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
</div>
<img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
</div>
</section>
</div>
<!-- col -->
<div class="clearfix visible-sm"></div>
<div class="col-sm-6 col-md-3 project-widget-container">
<section>
<div class="project-title">
<h4>Project 1</h4>
</div>
<div class="project-excerpt">
Lorem <a href="#">Test</a> dolor sit amet, consectetur adipiscing elit.
</div>
<div class="project-image-container">
<div class="thumb">
<img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
</div>
<img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
</div>
</section>
</div>
<!-- col -->
<div class="col-sm-6 col-md-3 project-widget-container">
<section>
<div class="project-title">
<h4>Project 1</h4>
</div>
<div class="project-excerpt">
Lorem <a href="#">Test</a> dolor sit amet, consectetur adipiscing elit.
</div>
<div class="project-image-container">
<div class="thumb">
<img class="img-responsive" src="http://bombdiggitydesign.com/jsbin/xffdfd.png">
</div>
<img class="imac img-responsive" src="http://s29.postimg.org/b5kegwt53/small_mac.png">
</div>
</section>
</div>
<!-- col -->
<div class="clearfix visible-sm"></div>
</div>
<!-- row -->
</div>
<!-- container -->
</body>
</html>
&#13;
答案 2 :(得分:0)
不确定这是否让你说得对,但这里有一个MacBook Pro屏幕的小演示,里面有一只脾气暴躁的猫。这是你想要实现的那种结果吗? (编辑:查看整个机构的代码片段#2(使用&#34;整页&#34;视图以获得更好的结果))
仅限屏幕
html * {
box-sizing: border-box;
}
#content {
background: url('http://truestorieswithgill.com/wp-content/uploads/2013/09/20130915-190532.jpg') no-repeat center center;
background-size: contain;
width: 100%;
height: 100%;
}
#outer-frame {
border: 4px solid #DADFE1;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
height: 350px;
width: 600px;
}
#inner-frame {
height: 100%;
border: 20px solid #000;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: hidden;
}
&#13;
<div id="outer-frame">
<div id="inner-frame">
<div id="content"></div>
</div>
</div>
&#13;
屏幕+正文
html * {
box-sizing: border-box;
}
.wrap{
width: 100%;
height: 100%;
}
#content {
background: url('http://truestorieswithgill.com/wp-content/uploads/2013/09/20130915-190532.jpg') no-repeat center center;
background-size: contain;
width: 100%;
height: 100%;
}
#outer-frame {
border: 4px solid #DADFE1;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
height: 350px;
width: 600px;
margin: 0 auto;
}
#inner-frame {
height: 100%;
border: 20px solid #000;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: hidden;
}
#body{
height: 20px;
background: #DADFE1;
width: 700px;
margin: 0 auto;
border-radius: 2px;
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
}
#notch{
height:10px;
width: 100px;
background: #BDC3C7;
margin: 0 auto;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
box-shadow: inset 1px -1px 2px rgba(0,0,0,0.5);
}
&#13;
<div class="wrap">
<div id="outer-frame">
<div id="inner-frame">
<div id="content"></div>
</div>
</div>
<div id="body">
<div id="notch"></div>
</div>
</div>
&#13;