• 技术文章 >web前端 >前端问答

    css可以加载图片吗

    青灯夜游青灯夜游2022-09-16 18:28:15原创148

    css可以加载图片。在css中,可以利用background-image或background属性来加载图片;这两个属性都可以配合url()函数来为元素设置背景图像,语法“background-image: url(图片路径);”或“background: url(图片路径);”。

    大前端零基础入门到就业:进入学习

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在css中,可以利用background-image或background属性来加载图片。

    background-image属性为元素设置背景图像;而background是一个简化属性,可以在一个声明中设置所有背景样式,当然也包括背景图片。

    语法:

    background-image:url(图片路径);
    background:url(图片路径);

    url()函数接受单个参数url,该参数以字符串格式保存url。

    说明:

    提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,可以使用背景色带代替。

    CSS 加载图片的示例

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			div {
    				width: 400px;
    				height: 300px;
    				border: 1px solid red;
    			}
    
    			.img1 {
    
    				background-image: url(img/1.jpg);
    				background-size: 200px;
    				background-repeat: no-repeat;
    			}
    			.img2 {
    			
    				background-image: url(img/2.jpg);
    				/* background-size: 200px; */
    			}
    		</style>
    	</head>
    	<body>
    		<div class="img1"></div>
    		<div class="img2"></div>
    	</body>
    </html>

    1.png

    (学习视频分享:css视频教程web前端

    以上就是css可以加载图片吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:在css中什么属性用于清除浮动 下一篇:实现css文字前留白属性有哪些
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• css里能控制显示虚线吗• css样式中的calc是什么意思• css里pc是什么单位• animate.css是什么意思• 如何写出优雅耐看的css代码?css命名小技巧分享!• 总结分享几个借助 CSS 来更好的控制定时器的方法
    1/1

    PHP中文网