如何在另一张图片中显示图片

时间:2015-11-14 16:38:57

标签: html css

我正在尝试实现我正在显示的图像显示在计算机屏幕中的效果。所以基本上,屏幕上会有一个计算机屏幕和我的图像的图像。

我要做的是使用photoshop将整个内容显示为单个图像。但这不是真正的可扩展性。我的另一个想法是创建计算机屏幕的CSS边框图像,但这听起来有点涉及,我正在寻找一个快速的事情。

我知道我已经在很多网站上看到了这种效果(但是我记不起任何检查来源的名称),我真的觉得可能有一个现成的解决方案来实现这一点。这样一个现成的解决方案是否存在,或者您能想到一种简单的方法来实现这一目标吗?

3 个答案:

答案 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定位方法来实现。这是一个你可以使用的例子。

JSbin Demo



.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;
&#13;
&#13;

答案 2 :(得分:0)

不确定这是否让你说得对,但这里有一个MacBook Pro屏幕的小演示,里面有一只脾气暴躁的猫。这是你想要实现的那种结果吗? (编辑:查看整个机构的代码片段#2(使用&#34;整页&#34;视图以获得更好的结果))

仅限屏幕

&#13;
&#13;
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;
&#13;
&#13;

屏幕+正文

&#13;
&#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;
&#13;
&#13;