我需要找到一种方法来改变我在单个图像文件中的一些图标的大小,并由WordPress的Visual Composer插件中的脚本模块呈现。
示例html代码:
<ul class="ts-social-icons simple">
<li style="margin: 5px; padding: 0px;" class="ts-social-icon center">
<a href="mailto:BLABLA@gmail.com" class="ts-social-email " target="_blank" style="">
<i style="top: 9px;" class="ts-social-email"></i>
</a>
</li>
<li style="margin: 5px; padding: 0px;" class="ts-social-icon center">
<a onclick="return false" "="" href="#" class="ts-social-phone " target="_blank" style="">
<i "="" 9px;="" top:="" class="ts-social-phone style="></i>
</a>
</li>
<li style="margin: 5px; padding: 0px;" class="ts-social-icon center">
<a onclick="return false" "="" href="#" class="ts-social-cell " target="_blank" style="">
<i "="" top:="" class="ts-social-cell style="></i>
</a>
</li>
<li style="margin: 5px; padding: 0px;" class="ts-social-icon center">
<a href="http://www.asd.com/" class="ts-social-portfolio " target="_blank" style="">
<i style="top: 9px; " class="ts-social-portfolio"></i>
</a>
</li>
<li style="margin: 5px; padding: 0px;" class="ts-social-icon center">
<a href="http://www.asd.com/" class="ts-social-link " target="_blank" style="">
<i style="top: 9px; " class="ts-social-link"></i>
</a>
</li>
<li style="margin: 5px; padding: 0px;" class="ts-social-icon center">
<a href="http://https://www.facebook.com/asd" class="ts-social-facebook " target="_blank" style="">
<i style="top: 9px; " class="ts-social-facebook"></i>
</a>
</li>
当前CSS
.ts-social-icons li a i {
background: url("images/team-socials-black.png") no-repeat scroll center center rgba(0, 0, 0, 0) !important;
}
如果我改变高度或宽度,我得到的是重复的图标:
.ts-logo-icons li a i, .ts-social-icons li a i, .ts-teammate-icons li a i {
display: inline-block;
height: 20px;
margin: 10px auto;
text-align: center;
text-decoration: none;
width: 20px;
z-index: 999;
}
也许有一种方法可以使用Javascript或jquery代替CSS吗?
答案 0 :(得分:1)
我不建议您使用拼接方式执行此操作,因为如果没有广泛编写使用数字计算来调整div的大小,则会在用户调整页面大小时使用您需要的控件。
相反,我会使用以下方法之一:
改为使用img
元素:
<img width="100%" height="100%"/>
然后它将始终调整为它的父div(当前为20px)
使用background-image
(就像你已经存在,但不是拼接),并添加:
background-size:100% 100%;
现在你已经看到它是如何用单个图像完成的,想象一下拼接是多么困难。但如果您确实想要使用这条路线,则需要使用第二种方式,只需将其更改为px
坐标而不是%
,并在页面调整大小时更改它们(如jQuery之类的东西)