目前正在通过编写我在网上找到的很酷的网站来学习 html。我无法弄清楚这个网站如何 http://sociali.st将一张图像用于 iPhone 外壳,将另一张图像用于 iPhone 屏幕(想想 photoshop 中的剪切蒙版)。似乎无法理解它?
这是我的代码
<div class="row">
<div class="small-6 columns">
<h1 class="value-prop">Organize the <br>things you love.</h1>
</div>
<div class="small-6 columns">
<div class="phone">
<img src="http://sociali.st/wp-content/themes/socialist/library
/images/views/home/home-introduction-screen.png">
</div>
</div>
</div>
CSS
.phone {
width: 359px;
height: 935px;
background-image: url('http://sociali.st/wp-content/themes/socialist/
library/images/components/devices/device-iphone
-5c-perspective-left-shell@2x.png?cache=290611593');
background-size: 100% 100%;
}
最佳答案
神奇的是使用绝对定位和透明背景,更像是 Photoshop 图层。
检查这个: http://codepen.io/anon/pen/dGxhy
- 在
.phone
中使用position: relative
,这样我们就可以根据它自己的顶部/左侧定位它的子元素。 - 由于标准堆叠顺序,#phone-content 已经位于手机边框上方。
- 然后使用
position
、top
和left
属性,我们可以移动内容层以匹配所需的占位符
阅读了一些与 css 位置属性相关的文章(例如 http://css-tricks.com/almanac/properties/p/position/ ),您会很清楚;)
关于html - 图像层次结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25630970/