美文网首页
CSS如何让背景图兼容各种类型的手机

CSS如何让背景图兼容各种类型的手机

作者: 武汉前端阿杰1001 | 来源:发表于2019-10-08 16:10 被阅读0次
例:签到牌子(背景图)

html结构

<item盒子>

<背景图></背景图>

</文字></文字>

</文字></文字>

</item盒子>

css样式

item盒子{

width:22%;

height:100px;

margin-left:2%;

float: left;

}

背景图:{

position: relative;

    width: 100%;

    height: 100%;

    background-image: url(/static/img/btn-icon@2x.2505a94.png);

    background-size: contain;

    background-repeat: no-repeat;

}

相关文章

  • CSS如何让背景图兼容各种类型的手机

    html结构 <背景图> css样式 item盒子{ wi...

  • day10

    A、我今天学到了什么 1、如何设置边框线 例子: //CSS 2、如何让背景图片有阴影 //CSS 3、如何设置上...

  • CSS3 背景

    知识点: CSS3 背景图像区域CSS3 背景图像定位CSS3 背景图像大小CSS3 多重背景图像CSS3 背景属...

  • 文章收藏

    css 1、纯CSS控制背景图片100%自适应填充布局 thinkphp 1、thinkphp如何去掉index.php

  • CSS样式-背景(background)

    CSS样式 css背景(background) CSS 可以添加背景颜色和背景图片, 以及来进行图片设置。 背景图...

  • Uni

    背景图 背景图的设置 css 效果图

  • CSS-背景5-多张背景图

    1、多张背景图 CSS3可以选择多张背景图,每张背景图都可以独立设置尺寸、定位。下面我们使用CSS3的多张背景图,...

  • css背景和精灵图

    css背景和精灵图 背景 1.如何设置背景图片? 在CSS中有一个叫做background-image: url(...

  • 前端开发

    HTML、CSS、JavaScript Web前端手机Html5前端性能优化浏览器兼容移动应用内置WEB页兼容 J...

  • 兼容性问题

    CSS兼容性问题PC页面布局兼容JS兼容问题移动页面兼容问题 CSS兼容问题.header {_width:100...

网友评论

      本文标题:CSS如何让背景图兼容各种类型的手机

      本文链接:https://www.haomeiwen.com/subject/uvlructx.html