心型背景图是一种常见的网页设计元素,让网页看起来更加可爱和浪漫。下面是一个简单的HTML代码实现。
<div class="heart-shape"> <p>我爱你</p> </div> <style> .heart-shape { width: 200px; height: 200px; background-color: #f8d9df; border-radius: 50%; position: relative; overflow: hidden; } .heart-shape:before, .heart-shape:after { content: ""; position: absolute; top: 0; left: 50%; width: 100px; height: 150px; background-color: #e4293e; transform: rotate(45deg); transform-origin: 0 0; border-radius: 50% 50% 0 0; } .heart-shape:before { margin-left: -50px; } .heart-shape:after { margin-left: 50px; transform: rotate(-45deg); } .heart-shape p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #ffffff; text-shadow: 1px 1px #e4293e; } </style>
这段代码将在一个200*200像素的区域内生成一个红色的心形背景,文字"我爱你"会居中显示在心形中心。通过调整CSS样式,可以改变心型的颜色、大小和位置等属性,实现不同的效果。