更改按钮的背景图像(Change the background

编程入门 行业动态 更新时间:2024-10-28 05:17:07
更改按钮的背景图像(Change the background-image of a Button)

无法将按钮的图像更改为箭头,尝试了多项但却没有完全奏效。

    button .arrow{
      background-image: url("http://alexoliveira.me/Hawaii/images/chevron-left.png");
      background-repeat: no-repeat;
      background-position: 50% 50%;
      /* put the height and width of your image here */
      height: 50px;
      width: 200px;
      border: none;
    }
    
    .arrows {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position:absolute;
    
    } 
  
    <div class="arrows">
      		<button onClick="carousel(-1)"  class="arrow" style="width:20px;height:40px;"></button>
      		<button onClick="carousel(1)" src="http://alexoliveira.me/Hawaii/images/chevron-right.png" class="arrow" style="width:20px;height:40px;"></button>
      	</div> 
  
 

Can't change the image of the button to the arrows,tried multiple things but didn't quite work.

    button .arrow{
      background-image: url("http://alexoliveira.me/Hawaii/images/chevron-left.png");
      background-repeat: no-repeat;
      background-position: 50% 50%;
      /* put the height and width of your image here */
      height: 50px;
      width: 200px;
      border: none;
    }
    
    .arrows {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position:absolute;
    
    } 
  
    <div class="arrows">
      		<button onClick="carousel(-1)"  class="arrow" style="width:20px;height:40px;"></button>
      		<button onClick="carousel(1)" src="http://alexoliveira.me/Hawaii/images/chevron-right.png" class="arrow" style="width:20px;height:40px;"></button>
      	</div> 
  
 

最满意答案

只需将你的css更新为button.arrow(删除空格)。 你必须调整你的样式表

just update your css to button.arrow (remove the space). you have to adjust your stylesheet then

更多推荐

本文发布于:2023-07-20 12:34:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1199611.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:按钮   图像   背景   background   Change

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!