怎样在css中改变背景图大小?

在这里插入图片描述
类似于这种情况,在背景图中(企鹅和黄色部分)添加文字的时候发现背景图有些小,想要调整背景图片大小,以下是未调整之前css源码:

.t3 a{background: url(…/img/images/千锋页面_03.jpg) no-repeat ;

  width: 201px;

  height: 29px;

  margin-right: 26px;

  font-size: 12px;

  line-height: 24px;

  color: #FFFFFF;

  padding-left:29px ;

  padding-top: 5px;

  text-align: center;}

这个时候是选中当前背景图元素之后添的一些属性。

改变背景图大小的同时需要改变A标签的宽高去适应背景图。

此时A标签属于内联元素,属性中的 宽高设置(width: 201px; height: 29px;)对A标签没有任何作用,需要先将A标签的内联元素改成内联块才可以,只要A标签中添加一个属性就可以:display:inline-block

添加完display属性之后再去更改 宽高设置(width: 201px; height: 29px;)就会产生作用。

接下来是设置背景图片大小,添加一个背景图片大小属性值:background-size:201px(左右) 34px(上下);

这些属性值都添加完之后就可以了,具体代码如下:

.t3 a{background: url(…/img/images/千锋页面_03.jpg) no-repeat ;

  background-size: 201px 34px;

  width: 201px;

  height: 29px;

  display: inline-block;

  margin-right: 26px;

  font-size: 12px;

  line-height: 24px;

  color: #FFFFFF;

  padding-left:29px ;

  padding-top: 5px;

  text-align: center;}

在这里插入图片描述

至此,所有操作都做完了,想要改变背景图大小就改background-size,想要改变A标签大小就改width、height。这教程详细吧!!!欢迎大家经常找我沟通呀,互相学习,互相进步。

需要注意的一点是内联元素想要在css中更改样式大小,必须现改为内联块才可以。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值