最近感悟了一些CSS调试之类的总结,以及爬坑,希望能帮助到你
一、背景图片边框异常
痛点: 图片没有铺满,字体颜色以及位置在最左边,按钮没有圆滑效果
原图
修改后
解决代码
.yzmcode{
background:url("../../assets/but-hqyzm.png") no-repeat center;
margin-left: 0.625rem;
text-align:center;
background-size: 100%;
flex: 1;
color: #ffffff;
width: 5.75rem;
height: 2rem;
border-radius: 0.3rem; // 圆滑效果
}
二、背景图片常用元素
.body{
background-image: url('${basepath}/resource/images/loginb1.jpeg');
background-size: 100%;
background-repeat:no-repeat;
}
css代码添加背景图片常用代码
1 背景颜色 {background-color:数值}
2 背景图片 {background-image: url(url)|none}
3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment:fixed|scroll}
5 背景定位 {background-position:数值|top|bottom|left|right|center}
6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}
三、两张图片重叠在一起显示效果
先看效果
**思路:**将兔子这个图片用作背景,再在标签里面插一张图片
<section class="nlbj-img">
<img src="../../assets/ztgift.png" alt />
</section>
// 兔子图片
.nlbj-img {
position: relative;
width: 20.5rem;
height: 16.5rem;
margin-left: 2rem;
// 中秋大礼包
background: url("../../assets/icon-zqdlb.png") no-repeat center;
background-size: contain;
img {
margin-left: 1.125rem;
margin-top: 11.125rem;
width: 16.5rem;
height: 2.275rem;
}
}
图片背景和文字重叠
效果
html
<section class="ttaifish-m-hwnlbjz">
<section>
<img src="../../assets/hwbjz-moon.png" alt/>
<section class="ttaifish-m-ui-btt">
收集月饼 兑换中秋豪礼
</section>
</section>
</section>
css
.ttaifish-m-hwnlbjz {
margin: 0 auto;
img {
margin-top: 17.325rem;
width: 27.75rem;
height: 5.75rem;
}
.ttaifish-m-ui-btt {
text-align: center;
font-style: oblique;
font-size: 1.5rem;
position: fixed;
margin-left: 6%;
margin-top: -1.65rem;
width: 21.75rem;
height: 2.55rem;
background: url("../../assets/moon-time-bg.png") no-repeat center;
background-size: contain;
color: #F5EED1;
}
}
五、其他小样式
1、设置文本框内输入的文字距离左边一段距离
text-indent或者padding-left,后者可能会增加框的宽度
2、textarea背景透明和标记的去除
背景是自身的白色,我需要是透明的,就类似,textarea不存在,直接就是一些文字悬浮在背景板上,这时候需要在css样式中定义
background-color: transparent;
3、设置背景图像的起始位置
background-position:center;
4、规定背景图像的尺寸
background-size: length|percentage|cover|contain;
值 | 描述 |
---|---|
length | 第一个值设置高度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。 |
percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。 |
cover | 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 |
5、margin-botto只在外面没有标签情况下才可用
6、位置定位
transform: translate(-100%, -0%);
position: absolute;
7、有时候居中失效可以用这个
justify-content: center;
display: flex;
8、如何解决移动端H5页面点击输入款页面放大
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">