淘先锋技术网

首页 1 2 3 4 5 6 7

心型背景图是一种常见的网页设计元素,让网页看起来更加可爱和浪漫。下面是一个简单的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>

心型背景图html代码

这段代码将在一个200*200像素的区域内生成一个红色的心形背景,文字"我爱你"会居中显示在心形中心。通过调整CSS样式,可以改变心型的颜色、大小和位置等属性,实现不同的效果。