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如何设置背景图片？background属性添加背景图片

				
			

			

				

					lin123_00的博客
				

				

					05-18
					
					5万+
					
				

			

		

		

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



更多相关视频：

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

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

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

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

			
		

	



                

              
                



	

		

			

				
					
CSS背景图片的使用

				
			

			

				

					weixin_53317758的博客
				

				

					03-24
					
					852
					
				

			

		

		

			
				
加点昨天剩下的学习内容

元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解一个模式的元素需要另外一种模式的特性

比如想要增加链接<a>的触发范围


	转换为块元素：display:block;
	
	
	转换行内元素：dispaly:inline;
	
	
	转换为行内块元素：dispaly:inline-block;
	


一个小工具的使用sinpaste

sinpaste是一个简单但强大的截图工具，也可以让你将截图贴在桌面

F1可以截图，同事测量大小，设置箭头，书写

			
		

	



                


  
              

                


	

		

			

				
					
关于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

			
		

	





	

		

			

				
					
css中背景图和小图标定位和优化

				
			

			

				

					weixin_42220130的博客
				

				

					03-22
					
					389
					
				

			

		

		

			
				
学习的过程是应该不断探索和总结的。以我为例，我认为我是一个相对愚笨，有没有很强的自制力，学习也爱耍些”小聪明“，总感觉自己懂了，但是每次一到自己进行书写的时候，又总是模模糊糊。我做了以下几件事我强迫自己慢下来，不必追求进度，不去想自己的未来、自己能不能找到工作（当你处于忧虑之中，就会无形的耗费自己的精力)。强迫自己写博客文章，遇到不懂的就及时总结和梳理自己的疑惑。要有个大致的方向，避免一个知识点钻牛角尖到底，忽略了自己本来的方向。

			
		

	



		

			
		



	

		

			

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

					
最新发布

				
			

			

				

					2301_78416672的博客
				

				

					05-11
					
					374
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

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

				

					02-24
					
					303
					
				

			

		

		

			
				
img图片与background的差异

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


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



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

			
		

	





	

		

			

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

				
			

			

				

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

				

					11-27
					
					6920
					
				

			

		

		

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

			
		

	





	

		

			

				
					
html背景动起来,CSS+HTML <循环滚动背景效果>

				
			

			

				

					weixin_39624769的博客
				

				

					07-21
					
					1110
					
				

			

		

		

			
				
参考效果地址：CSS背景图无限循环滚动动画[1]Tips：文末有示例代码地址。或许你主要想实现背景倾斜移动的效果，但这里也会给你介绍点其他知识点～ 首先如果你想要实现背景这样的，方法有很多，只要有一张图，和  动画就行了！svg图片地址[2]，接下来就是让重叠动起来，代码直接放最下面了就。知识点：注：有些属性可能用处不大，但是还是建议了解下place-items: center;[3]: 属性是a...

			
		

	





	

		

			

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

				
			

			

				

					01-23
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					12-07
				

			

		

		

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

			
		

	





	

		

			

				
					
利用jQuery和CSS将背景图片拉伸

				
			

			

				

					11-22
				

			

		

		

			
				
本篇文章主要探讨如何利用jQuery和CSS技术实现背景图片的拉伸效果，以适应不同浏览器窗口尺寸的变化，营造类似电脑桌面壁纸的效果。在讲解之前，需要明确一点，背景图片的平铺可以通过CSS的`background-repeat`属性...

			
		

	





	

		

			

				
					
 王者荣耀官方网站静态页面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)background-image背景图片添加多张

				
			

			

				

					nyf_unknow的博客
				

				

					07-20
					
					3053
					
				

			

		

		

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

			
		

	





	

		

			

				
					
讲解如何在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
					
					8764
					
				

			

		

		

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

			
		

	





	

		

			

				
					
background和img插入图片

				
			

			

				

					Akuil的博客
				

				

					11-23
					
					918
					
				

			

		

		

			
				
background 打包后图片不显示

			
		

	





	

		

			

				
					
CSS背景background设置

				
			

			

				

					pscool的博客
				

				

					05-15
					
					9376
					
				

			

		

		

			
				
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版

文章目录1. 背景back-ground-colorbackground-imagebackground-repeatbackground-positionbackground-clipbackground-originbackground-sizebackground-attachmentbackground简写属性练习 1：按钮点击效果练习 2：让背景固定不动
1. 背景
back-ground-color

.

			
		

	





	

		

			

				
					
利用css的background-image和background-position将多图放在一张图片上取用

				
			

			

				

					壁立千仞无欲则刚的博客
				

				

					07-01
					
					4968
					
				

			

		

		

			
				
将很多图标放在一张图片上，既方便管理，又不会出现有的图标加载比较慢，有的图标加载不到等情况。
1、html代码里面，比如要把图标放在一个span里，这样写：


2、然后将在css里这样写：
        .icon-class 
        {
            background-image:url("Images/icon.png");
            bac

			
		

	





	

		

			

				
					
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、付费专栏及课程。

              

            

          

      

      余额充值