background & background-image & border-image

亦凉 2021-11-04 23:14 323阅读 0赞

# background & background-image & border-image #

https://developer.mozilla.org/en-US/docs/Web/CSS/background

https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

--------------------

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background

https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image

# background & radius border #

> background color & view bug

https://codepen.io/xgqfrms/full/JQeqXQ

![740516-20190709165430993-1947613208.png][]

## linear-gradient ##

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

https://codepen.io/xgqfrms/pen/WqEBLB

![740516-20190626145047133-1079050266.png][]

https://codepen.io/xgqfrms/pen/bPrymz

![740516-20190626144112980-835810788.png][]

--------------------

# background-size #

> cover

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size

.circle { position: absolute; width: 1.76rem; height: 1.56rem; line-height: 1.56rem; /* background: url("../../images/guide/hexagon.png") cover no-repeat center center ; */ background: url("../../images/guide/hexagon.png") no-repeat center center ; background-size: cover; text-align: center; vertical-align: middle; cursor: pointer; font-size: 0.28rem; /* font-size: 0.16rem; */ color: #fff; } /* iphone 6/7/8 */ /* width: 375px & height: 667px */ @media (min-width: 375px) and (max-width: 375px) and (orientation: portrait) { .circle { position: absolute; width: 1.76rem; height: 1.76rem; line-height: 1.56rem; background: url("../../images/guide/hexagon.png") no-repeat center center; text-align: center; vertical-align: middle; cursor: pointer; font-size: 0.16rem; color: #fff; } .menu-text31 { transform: translateX(0.55rem) translateY(-0.15rem); } .menu-text32 { transform: translateX(-0.35rem) translateY(0.3rem); } } /* iphone 6/7/8 plus*/ /* width: 414px & height: 736px */ @media (min-width: 414px) and (max-width: 414px) and (orientation: portrait) { .circle { position: absolute; width: 1.76rem; height: 1.56rem; line-height: 1.56rem; background: url("../../images/guide/hexagon.png") no-repeat center center; text-align: center; vertical-align: middle; cursor: pointer; font-size: 0.16rem; color: #fff; } .menu-text31{ transform: translateX(0.45rem) translateY(-0.15rem); } .menu-text32{ transform: translateX(-0.35rem) translateY(0.2rem); } }

--------------------

转载于:https://www.cnblogs.com/xgqfrms/p/11089728.html

[740516-20190709165430993-1947613208.png]: /images/20211104/d107f589b8c94990a444e35f59817a53.png
[740516-20190626145047133-1079050266.png]: /images/20211104/afdc50e124a4466fb2f49bb78ecd8fa0.png
[740516-20190626144112980-835810788.png]: /images/20211104/0388fa6680b74a54bc8d8061098c0387.png