用CSS +DIV将第二张特定图片覆盖第一张图片的部分区域方法:
用CSS中元素的background : background-color || background-image || background-repeat || background-attachment || background-position。 示例代码如下:
复制代码代码如下:
background:transparent url(123.jpg) no-repeat scroll -140px -20px
解释:
transparent表示透明无颜色
url(123.jpg) 表示背景图片
no-repeat 表示图片不重复
scroll 表示背景图片随浏览器下拉而滚动
-140px 表示水平位置在图片的-140px处(以图片的左上角为0,0)
-20px 表示垂直位置在图片的-20px处(以图片的左上角为0,0)
自己写个class样式覆盖到框架的样式位置就好了。1.自定义图标替换ionic图标样式
<ion-item class="item item-complex my-complex item-icon-left item-icon-right">
<a class="item-content my-content" ng-click="goPage('archive', '个人信息')">
<i class="icon datum-img"></i>
<span style="font-size: 90%line-height:inherit">个人信息</span>
<i class="icon ion-ios-arrow-right msgText" style="font-size: 20px"></i>
</a>
</ion-item>1234567
.datum-img{/* 个人信息*/
background: url(../img/mine/datum.png) no-repeat center width: 20px height: 20px margin-top: 3px display: inline-block background-size: 100%}12345678
.my-complex .my-content{padding: 10px 0px 10px 0px}123
从代码中可以看到,.datum-img是使用自定义图标,宽高大小需要明确指出。而下面 .my-complex .my-content的样式内容是覆盖掉框架的.item-complex .item-content中padding的规格,而其他规格没写则还是以框架原有的规格显示。图标大小可以用font-size来调整。
总结:覆盖样式,1、先看下框架css的层次,2、依据框架层次自己写个不同名的class样式,样式内含有你需要覆盖的规格key要对,然后自己改想要的value。3、把自己写好的class样式名写到你需要覆盖的框架样式后面就能实现覆盖了。而且不会对原有的框架样式发生改变。
选择器优先级问题:
#article #subject dl的优先级比#subject dl优先级高,所以无法覆盖;
#subject dl的优先级没有#article dl高,所以会覆盖;
为同一个元素设置多个样式时,此时哪个样式生效由选择器的优先级确定:
选择器的优先级(权重):
内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
统配选择器 0
继承的样式 无
当一个选择器中含有多个选择器时,需要将所有的选择器的优先级进行相加,然后再进行比较,优先级高的优先显示,选择器的计算不会超过其最大的数量级(10个id选择器的优先级
不能达到1000)
分组选择器(并集选择器)的优先级单独计算,不会相加。
样式后面加!important,该样式获取最高优先级,内联样式不能加!important属性。
样式相同的谁在下面执行谁(样式的覆盖)。