CSS+HTML 利用背景background添加图片

最新推荐文章于 2024-05-11 13:00:20 发布
最新推荐文章于 2024-05-11 13:00:20 发布
阅读量1.9w 收藏 13
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39833794/article/details/79265125
版权 
可以用CSS+html实现图片的添加与切换，不需要总是加img，可以换方向考虑，加入背景图片，用padding撑开盒子，添加background，去重复就可以，
代码如下

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	.header-nav .icon-item{
		display: inline-block;
		margin: 10px;
		width: 46px;
		padding-top: 50px;
		text-align: center;
		background-repeat:no-repeat;
	}	
	
.header-nav .nav-left .icon1{
	background-image:url(img/2_03.png);
}
.header-nav .nav-left .icon2{
	background-image:url(img/2_05.png);
}
.header-nav .nav-left .icon3{
	background-image:url(img/2_07.png);
}
.header-nav .nav-left .icon4{
	background-image:url(img/2_09.png);
}
.header-nav .nav-left .icon5{
	background-image:url(img/2_11.png);
}

.header-nav .nav-left .icon1:hover{
	background-image:url(img/3_03.png);
}
.header-nav .nav-left .icon2:hover{
	background-image:url(img/3_05.png);
}
.header-nav .nav-left .icon3:hover{
	background-image:url(img/3_07.png);
}
.header-nav .nav-left .icon4:hover{
	background-image:url(img/3_09.png);
}
.header-nav .nav-left .icon5:hover{
	background-image:url(img/3_11.png);
}.header-nav .nav-right .icon1:hover{
	background-image:url(img/3_13.png);
}

	</style>
</head>
<body>
	<div class="header-nav">
            	<div class="nav-left">
            		<div class="icon-item icon1">美食</div>
            		<div class="icon-item icon2">美食</div>
            		<div class="icon-item icon3">美食</div>
            		<div class="icon-item icon4">美食</div>
            		<div class="icon-item icon5">美食</div>
            	</div>
</body>
</html>
 

 

鼠标移动上后
 


                

        

        

    




    

      

        

            

              
                
                  chancejl
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    3
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    13
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
CSS+背景图片实现百分比图表特效代码

				
			

			

				

					01-23
				

			

		

		

			
				
在CSS中，我们可以利用背景图片来模拟填充部分，通过改变背景图片的位置来调整图表的填充度。  1. **背景图片设置**：创建一个背景图片，这个图片通常是一条连续的图像，例如一条颜色渐变的条纹，代表图表的填充。在...

			
		

	



                

              
                



	

		

			

				
					
关于CSS中background:url()插入背景图片，图片路径的问题

				
			

			

				

					controlmaa的博客
				

				

					11-19
					
					2万+
					
				

			

		

		

			
				
写了一个css的练习，需要在一个盒子中插入图片作为背景，css代码如下（插入背景图片的代码在第五行）：
.search-btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(image/search-btn.png) no-repeat;
}

我的项目结构如下（上文的代码在index.css中，我想要插入的图片是image目录下的search-btn

			
		

	



                


  
              

                


	

		

			

				
					
img标签与background属性插入图片的差

				
			

			

				

					关注我！带你一路 "狂飙" 到底！
				

				

					02-24
					
					303
					
				

			

		

		

			
				
img图片与background的差异

小伙伴们都知道在网页当中要插入一张图片可以使用img，但是有些小伙伴在接触background之后，容易把这两个图片插入方式搞混，那么我们一起来详细的看一下吧 img是一个html标签，我们想要在网页中实现图片的插入，直接在img的属性src中写入图片路径就可以啦~


<img src="img/pic.jpg" alt="">



通过background实现插入图片，background是一个CSS提供的背景属性，是用来做修饰的，那么我们就需要先

			
		

	





	

		

			

				
					
HTML5实用小技巧分享（三）——两种添加背景图片的方式

					
最新发布

				
			

			

				

					2301_78416672的博客
				

				

					05-11
					
					358
					
				

			

		

		

			
				
通过上面的实际效果我们可以看出，图片只在那一个板块才有效果，往下翻了一点点，图片就不会像第一种的形式那样随滚轮滑动而3固定不变。实现效果，实际上，这个图片就是镶嵌在这里，如果有多行内容，需要滚轮的时候，图片的位置也不会变动。

			
		

	



		

			
		



	

		

			

				
					
css如何设置背景图片？background属性添加背景图片

					
热门推荐

				
			

			

				

					lin123_00的博客
				

				

					05-18
					
					5万+
					
				

			

		

		

			
				
在前端开发过程中，为了页面的美观，往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景？本章就给大家介绍css怎样设置背景图片。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。



更多相关视频：

0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发：BV1C54y1X7ro

前端发展简史，功能以及未来趋势！（你值得观看）：BV1w5411s7e4

给想学编程又无从下手的小白一些建议：BV1Zf4y117ji

「HTML+CSS」实现妙笔千山.

			
		

	





	

		

			

				
					
移动端使用background添加背景图方法总结

				
			

			

				

					移动端使用background添加背景图方法总结
				

				

					11-27
					
					6917
					
				

			

		

		

			
				
移动端使用background添加背景图方法总结
最近刚做完移动端的一个推广页面，里头的一部分内容需要用到css中的background来添加背景图。在实现的过程中，遇到了好多问题。由于移动设备有不通的屏幕尺寸，这就导致了在用background添加背景图片时会出现难以自适应的问题。再者背景图是根据内容进行变化的，内容有多高，背景图片就会有多高，随着屏幕尺寸的变化，背景图便会出现不同程度的拉伸和压...

			
		

	





	

		

			

				
					
(css)background-image背景图片添加多张

				
			

			

				

					nyf_unknow的博客
				

				

					07-20
					
					2959
					
				

			

		

		

			
				
在示例中，第一张图片的尺寸被设置为覆盖整个背景区域（cover），第二张图片的尺寸被设置为自动适应原始大小（auto）。使用 background-repeat 属性可以设置每张图片的重复方式。在示例中，第一张图片被设置为不重复（no-repeat），第二张图片被设置为默认的重复模式（repeat）。使用 background-position 属性可以分别设置每张图片的位置。在示例中，第一张图片的位置设置为居中顶部，第二张图片的位置设置为靠右底部。

			
		

	





	

		

			

				
					
css背景颜色透明背景图片切换效果

				
			

			

				

					12-07
				

			

		

		

			
				
在本主题中，“css背景颜色透明背景图片切换效果”涉及的是如何利用CSS实现一种动态效果，即当用户交互时，网页背景颜色逐渐变为透明，并同时切换到不同的背景图片。这种效果可以增加用户体验的趣味性和互动性，常被...

			
		

	





	

		

			

				
					
 王者荣耀官方网站静态页面css+html

				
			

			

				

					07-26
				

			

		

		

			
				
例如，使用`color`属性改变文字颜色，`font-family`指定字体，`background-image`添加背景图片，`padding`和`margin`控制元素间距，`display`属性可以实现流式布局、网格布局或Flexbox布局等。此外，CSS还支持选择器...

			
		

	





	

		

			

				
					
纯HTML5+CSS3制作图片旋转

				
			

			

				

					09-24
				

			

		

		

			
				
由于我们不直接使用`<img>`标签，而是通过CSS的背景图片属性来显示图片，因此在样式表中设置`background-image`属性指向图片路径。  接着，为了使图片呈现出圆形效果，我们使用`border-radius`属性，将其值设置为...

			
		

	





	

		

			

				
					
漂亮的表格css+html

				
			

			

				

					04-20
				

			

		

		

			
				
"漂亮的表格css+html"这个主题就是关于如何利用HTML和CSS技术来创建吸引人的表格。HTML（超文本标记语言）是网页内容的基础结构，而CSS（层叠样式表）则是用于美化这些结构的工具。以下将详细介绍这两个技术在创建...

			
		

	





	

		

			

				
					
讲解如何在HTML中添加背景图片?

				
			

			

				

					标梵互动
				

				

					01-13
					
					4万+
					
				

			

		

		

			
				
在HTML中，我们可以使用两种不同的方法在HTML网页上显示背景图片：
使用背景属性（HTML标签）
使用CSS内部样式表
提示：HTML 5不再支持标签的background属性，建议使用CSS在Html文档中添加背景图片。
使用背景属性
使用Background属性在Html文档中添加背景图片。按照以下步骤，我们可以轻松实现。
步骤1：我们在文本编辑器中键入HTML代码，或者用文本编辑器打开现有的HTML文件。
<!DOCTYPE html>
<html>
    <hea

			
		

	





	

		

			

				
					
前端背景图放置_css如何设置背景图片？background属性添加背景图片

				
			

			

				

					weixin_36280540的博客
				

				

					02-05
					
					8749
					
				

			

		

		

			
				
在前端开发过程中，为了页面的美观，往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景？本章就给大家介绍css怎样设置背景图片。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。css怎样设置背景图片?css background属性就是专门设置背景的属性，可以设置背景色，也可以设置背景图片。下面看看background可以设置的属性：background-...

			
		

	





	

		

			

				
					
background和img插入图片

				
			

			

				

					Akuil的博客
				

				

					11-23
					
					906
					
				

			

		

		

			
				
background 打包后图片不显示

			
		

	





	

		

			

				
					
background 互联网图片_HTML页面插入图片，使用background还是img标签

				
			

			

				

					weixin_39976081的博客
				

				

					02-23
					
					964
					
				

			

		

		

			
				
很多新手在刚开始学习HTML标签的时候，老师一定会教你这种引入图片格式，第二天学习css的时候，老师又会教你给div等元素添加背景图片，div{background-image:url(xxx.png);}那么这两种方式究竟孰优孰劣，分别应该在什么情况下使用呢？今天我在这里就给大家详细讲解一下：关于img标签，我们要知道，它除了src路径以外，还有两个属性，一个是alt，一个是title首先我们讲...

			
		

	





	

		

			

				
					
前端插入图片(img)和背景图片(background)应用区别

				
			

			

				

					weixin_42403418的博客
				

				

					11-11
					
					9151
					
				

			

		

		

			
				
前端插入图片(img)和背景图片(background)应用区别
1.插入图片
结构
渲染		img{
height: 200px;/插入图片大小width和height/
width: 200px;
margin:20px 20px 20px 20px;/盒子的内外边距,img为行内块/
padding:10px 10px;
}
整体代码



	
	Document
	


		


区别:
...

			
		

	





	

		

			

				
					
background 添加两张或多张背景图

				
			

			

				

					Be myself
				

				

					07-12
					
					2万+
					
				

			

		

		

			
				
谷歌，火狐，猎豹，ie，极速360亲测！

background 语法：


background: url(../img/bg1.png)no-repeat 0% 8%;
            url(../img/bg1.png)no-repeat 0%(左右距离） 8%(上下距离);

1.添加两张或者多张背景图：


background: url(../img/t_blueBanner...

			
		

	





	

		

			

				
					
img与background引入图片的区别

				
			

			

				

					坤音女孩的博客
				

				

					11-18
					
					2159
					
				

			

		

		

			
				
1.img占位，一般引入比较重要的图片，能被搜索引擎抓取；background不占位，一般引入装饰性图片，不能被搜索引擎抓取
2. 背景图片：background:url(‘t.png’) no-repeat 0 bottom pink;
第一个值: 图片路径;
第二个值：平铺方式，如果不写，平铺。no-repeat不平铺。
		repeat-x水平平铺 repeat-y垂直平铺
第三个值：水平坐...

			
		

	





	

		

			

				
					
前端应用_css_背景图片（background-image）和插入图片的区别

				
			

			

				

					上海 彭彭
				

				

					07-30
					
					4971
					
				

			

		

		

			
				
让图片 作为背景
使用 background-image：url（image path）
示例如下：
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=devi...

			
		

	





	

		

			

				
					
html+css+js网页制作的图片资源

				
			

			

				

					08-01
				

			

		

		

			
				
我们可以使用CSS的background属性来设置图片作为背景图案，或者使用width和height属性来调整图片的尺寸。  除了静态的图片，我们还可以利用JavaScript实现对图片资源的动态操作。通过JavaScript的DOM（Document ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值