求教css的大神，背景图片png的相关问题

Posted 2023-05-06

background: url("/static/home/index/img/body_back_3107edb8.png") repeat-x scroll 0 95px transparent; 求解释 repeat-x scroll 0 95px transparen分别是什么意思。还有这张背景图片很小，而且是竖着的，但是网页上看到的效果却是横着的，这是什么状况？帮帮忙，小弟刚学css

参考技术A repeat-x
scroll
0
95px
transparent
repeat-x的意思是，这个背景图片在x轴上重复，这也就是为什么你看到一个竖着的小图片为什么会横着的了，因为它在横轴的方向不断重复了
0
95px的意思是，这个背景图片的位置是距离左边的距离为0像素，距离上面的距离为95像素，所以你会发现这个背景图片距离元素的顶部还有一段距离
transparent的意思是，这个元素的背景颜色是透明的，其实这一个transparent加不加都没关系，不过为了防止网页其他CSS可能会定义一些背景颜色的样式，干扰到了这个元素罢了。
对了,我还漏掉了一个scroll,这个样式加不加都没关系的,默认的属性就是scroll,它表示这个背景会随着滚动条的滚动而滚动。

CSS改变png图片颜色

来源地址：http://www.zhangxinxu.com/wordpress/?p=5429

张鑫旭大神的个人网站上看到的，纯属分享和记录

css

div.icon{height:20px;width:20px;overflow: hidden;}
            .icon .icon{width: 20px;height: 20px;display:block;position: relative;left: -20px;border-right: 20px solid transparent;
                background: url(img/icon.png) no-repeat;-webkit-filter: drop-shadow(#000 20px 0);filter: drop-shadow(#000 20px 0);   
            }

html

<div class="icon">
            <span class=‘icon‘ id=‘icon‘></span>
        </div>
        <input type="color" id=‘color‘ />

JS

document.getElementById(‘color‘).onchange = function(){
            var c = this.value;
            document.getElementById(‘icon‘).style.webkitFilter = ‘drop-shadow(‘+c+‘ 20px 0)‘;
        }

在谷歌、火狐手机端、都是可以用的，使用的技术是css 里滤镜里的投影，具体看原文