CSS——插入背景（免费抢先体验）

最新推荐文章于 2024-01-17 16:56:37 发布

书棋06

最新推荐文章于 2024-01-17 16:56:37 发布

阅读量230

点赞数

文章标签： css3 html5 javascript

本文链接：https://blog.csdn.net/m0_72975897/article/details/126647382

版权

本文介绍了两种使用HTML和CSS将图片作为背景的方法。第一种是将图片设置为整个div的背景，并通过定位使文本居中显示。第二种是在li元素中设置背景图片，实现列表项的独特样式。同时，文章还提到了背景图片大小设置、渐变色的使用以及在布局中的注意事项。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

将图片作为背景，用定位的方式将文本框排列在图片上（这个图片发不出来，系统说我图片违规了，有不明白的小伙伴可以发私信，或者在下面评论呀！）

HTML部分

<body>
        <div class="advertising">
            <div class="next">
            <ul>
                <li>*姓名：<input type="text"></li>
                <li>*邮箱：<input type="text"></li>
                <li>*电话：<input type="text"></li>
                <li>性别：<select name="" id="">
                <option value="">请选择</option>
                <option value="">男</option>
                <option value="">女</option>
                </select></li>
                <li>年龄：<select name="" id="">
                <option value="">请选择</option>
                <option value="">18~20</option>
                <option value="">21~30</option>
                </select></li>
            </ul>
            
        </div class="img"><center>
        <img src="./图片素材/学员免费体验/btn.jpg" alt=""></center>
        </div>
</body>

CSS部分：

*{
                margin: 0;
                padding: 0;
                text-decoration: none;
                list-style: none;
                            }
            .advertising{
                background:url(./图片素材/学员免费体验/bg.jpg) no-repeat ;
                background-size: 100% 100%;
                width: 300px;
                height: 350px;
                margin: 50px;
            }
            .next{
                width: 300px;
                height: 250px;
                position: relative;
                left: 40px;
                top: 100px;
                line-height: 2;
            }
            ul li{
                font-size: 14px;
                color: white;
            }

这是第一种方式，用图片作为背景，用定位的方式，将其他文本居中显示；

接下来这个也是用图片作为背景插入到这个列表中的，但是也是有不同的，这个背景是插入在我们的li中，具体哪里有区别，我们一起来看看吧！

HTML部分：

<body>
		<div class="nav">
			<div class="main">
				<h3><img src="./图片素材/中心开班/bg.gif" alt="">中心开班信息</h3>

			</div>
			<div class="information">
				<ul>
					<li><a href="#">8月12日：学历+技能班</a></li>
					<li><a href="#">8月16日：高考特招班</a></li>
					<li><a href="#">8月23日：Java精英班</a></li>
					<li><a href="#">8月31日：学士后强化班</a></li>
					<li><a href="#">9月5日：大学生就业班</a></li>
					<li><a href="#">9月9日：企业定向委培班</a></li>
					<li><a href="#">9月16日：网络营销强化班</a></li>
				</ul>
			</div>
		</div>
	</body>

CSS部分

* {
				padding: 0;
				margin: 0;
				text-decoration: none;
				list-style: none;
			}
            .nav{
				width: 300px;
				margin: 50px;
				border: 1px gray solid;
				border-radius: 15px;
				overflow: hidden;
			}
			a {
				color: gray;
			}

			li a:hover {
				color: red;
			}
			li{
				width: 300px;
				height: 50px;
				background:url(./图片素材/中心开班/dotBg.gif);
				line-height: 2;
				text-indent: 1em;
				background-size:100% 100%;
				
			}
			.main{
				width: 300px;
				height: 50px;
				background-color: #6BC7F9;
				line-height: 50px;
				color: white;
				border-radius: 15px 15px 0px 0px;
				border-bottom: 2px white solid;
			}
			.information{
				background-image: linear-gradient(#ADE0FC 10%,#FFFFFF 20%);
			}