CSS的文本样式属性值

“repeat-x”; (横向X轴平铺)
“repeat-y”; (纵向Y轴平铺)

在CSS中实现图片平铺:【background-repeat:属性值】

在CSS中实现图片:不平铺

.box1{
width: 100px;
height: 100px;
border: dashed red;
background-image: url(…/img/picter/ai2003.jpg);
background-repeat: no-repeat;
}

在CSS中实现图片X轴平铺:

.box1{
width: 500px;
height: 300px;
border: dashed red; //画布边框
background-size: 100px; //图片大小
contain; //上下填充画布
cover; //完全填充画布,影响图片原貌

background-image: url(…/img/picter/ai2003.jpg);
background-repeat: repeat-x;
}

在CSS中实现图片的位置: 【background-position:属性值】

.box1{
width: 500px 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ;
height: 100px;
border: dashed red;
background-size: 100px;
background-image: url(…/img/picter/logo_db.png); //图片路径
background-repeat: no-repeat; //不平铺
background-position: center center; //图片居中
bottom lift ; //左下角
top right; // 右上角
50px 50px ; //自定义位置 }

我目前是在职前端开发,如果你现在也想学习前端开发技术,在入门学习前端的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,你都可以申请加入我所在的前端学习交流裙:421374697。里面聚集了一些正在自学前端的初学者,转行者,初阶者,我这里也有我做前端技术这段时间整理的一些前端面试题,前端开发源码教程,PDF文档书籍教程,需要的话都可以找裙猪获取。

CSS中的背景附件:【background-attachment:属性值】

background-attachment:fixed; //固定图片位置

综合上诉结构,可以* 综合简写属性 颜色 地址 平铺方式 是否固定 (不需要可以不写) 位置

background: pink url ("img/图片路径") no-repeat center center; background-size: 100%;

路径") no-repeat center center;
background-size: 100%;`

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值