前端CSS样式(image)

目录

图片

设置图片的最大高度

设置覆盖图片的层叠顺序

两张照片叠放在一起:

把图片设置为按钮

设置图片上的文本

设置图片的最大高度

max-height: 835rpx;

设置覆盖图片的层叠顺序

z-index: 1; /* 设置覆盖图片的层叠顺序，确保在背景图片之上 */

两张照片叠放在一起:

<div class="image-container"> <img src="image1.jpg" class="image1" alt="Image 1"> <img src="image2.jpg" class="image2" alt="Image 2"> </div>

.image-container { position: relative; /* 设置容器为相对定位 */ width: 100%; /* 设置容器宽度为父容器宽度 */ height: auto; /* 自动调整容器的高度，根据内容大小 */ } .image1, .image2 { position: absolute; /* 设置图片为绝对定位 */ top: 0; /* 图片距离容器顶部的距离 */ left: 0; /* 图片距离容器左侧的距离 */ width: 100%; /* 图片宽度占满容器宽度 */ height: auto; /* 图片高度自适应，根据宽度等比例缩放 */ } .image2 { z-index: 1; /* 设置第二张图片的层叠顺序高于第一张图片 */ }

把图片设置为按钮

.image-btn { background-image: url('/static/images/login/loginButton.png'); background-size: 100%; position: relative; width: 65%; /* 缩小宽度 */ height: 83rpx; /* 缩小高度 */ text-align: center; background-color: #142a49; z-index: 2; margin: 30px auto; /* 缩小外边距 */ margin-left: 98rpx; color: #4efefe;; }

设置图片上的文本

<view class="baseInfo-container"> <text class="textStyle">基本信息</text> <image class="baseInfo" src="../../static/images/energy/baseInfo.png"></image> </view>

.baseInfo-container { position: relative; .baseInfo { width: 90%; left: 40rpx; top: -120rpx; } .textStyle { position: absolute; color: #ffffff; left: 320rpx; top: -105rpx; } }