从图像上的 alt 标记文本中删除边框

Posted 2023-02-22

【中文标题】从图像上的 alt 标记文本中删除边框

【英文标题】：Remove border from alt tag text over an image

【发布时间】：2015-08-13 11:05:10

【问题描述】：

我正在尝试从 alt 标记文本中删除边框。我正在使用透明图像作为贝宝表单中的按钮，通过 css 链接。 paypal 按钮将 alt 标签作为按钮文本并在其周围放置边框。我不清楚为什么会发生这种情况，但这是我必须从贝宝处理的。显然我必须使用图像。所以我使用了一个透明图像，所以我可以在 css 中设置它的样式，让它看起来像我的其他按钮，而不是尝试获取每个按钮状态的屏幕截图。

我将代码配对，只关注文本“查看购物车”周围的边框。

CSS

//link to my transparent button with no text on it
#vyc 
      background-image: url(http://lakenney.com/kenney_lucille-final/images/vyc.png) no-repeat;
  
//the user agent that is controlling the outer border
user agent stylesheetinput[type="hidden" i], input[type="image" i], input[type="file" i] 
      -webkit-appearance: initial;
      padding: 20px;
      background-color: initial;
      border: dotted;
      border-top-color: red;
  
//a couple of tags I'm using to try to access the alt tag border not working
#vyc img[alt] 
      /*border: 1px dashed #3D8EA5;*/
      border: transparent !important;
  
input#vyc img[alt] 
      border: transparent !important;
  

html

这里是相同代码的 jsfiddle 链接： http://jsfiddle.net/lakenney/w0zpmutn/

【问题讨论】：

我正在使用 input type="image" 因为它是一个贝宝按钮。我必须使用图像。所以我试图通过使用 input type="image" 并链接到透明图像来解决这个问题，以便我可以设置它的样式。除了我在 alt 标签周围得到那个边框之外，这一切都有效。我试图弄清楚使用什么 css 元素来为该图像设置 alt 标签的样式。也许我正在尝试做的事情不可行？

@humble.rumble 有趣。但是一旦我链接到 html 中的图像，alt 文本就不再可见，这是有道理的，因为 alt 标记的作用是在图像丢失时代替图像。也许我可以通过遍历 DOM 来访问 input 的子项，并以某种方式获得 alt。那可能值得一试。或者，可以创建带有文本的透明图像，然后使用 css 对其进行样式设置。那可能行得通。我总是可以将按钮创建为图像，但我认为应该有更好的方法。我只是在脑子里乱扔东西。 :)

@humble.rumble 将图像 url 放在 html 中并使用覆盖对我来说需要更多的调整！你是个天才！谢谢！ jsfiddle.net/lakenney/w0zpmutn

【参考方案1】：

input(type = "image") 需要一个缺少的 src 图像，因此缺少边框。是否可以将透明图像作为 src 值？

<input type="image" src="http://lakenney.com/kenney_lucille-final/images/vyc.png" id="vyc" border="0" name="submit" value="View Cart" >

http://jsfiddle.net/w0zpmutn/2/

【讨论】：

这是一个棘手的问题。我想我想做的是一个黑客。图片是通过css链接的。我对图像进行了着色，以便您可以看到它。但我现在明白为什么 alt 标记会显示，因为 html 输入中没有“src”。但我想做的是用css控制那个alt标签。我的问题是，我必须使用带有贝宝表格的图像。我正在尝试使用通过 css 链接的透明图像，以便我可以将其设置为看起来像我的其他按钮。如果我可以连接到 alt 标签并设置样式，我就可以让它工作。也许这不可能？

我的透明图片通过 css 链接，背景为浅蓝色：jsfiddle.net/lakenney/w0zpmutn

谢谢。您的回复使我朝着正确的方向前进。 :)

我的 hack 对我来说很好用了一段时间。但在我在互联网高速公路上的旅行中，我发现了更好的东西。实际上，我可以在不使用图像的情况下设计一个 paypal 立即购买按钮。见这里：daddydesign.com/wordpress/…

【参考方案2】：

您可以使用透明图像作为源来消除边框，但是您没有替代文本，但您可以覆盖一些文本。

document.querySelector('#input1').onfocus = function() 
    console.log('clicked');
    this.blur();

label 
    position: relative;
    width: 100px;
    display: inline-block;
    line-height: 3rem;
    height: 3rem;
    background: blue;
    border: 0;
    border-radius: 5px;

input 
    width: 100px;
    height: 100%;

.overlay 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    color: #FFF;
    text-decoration: none;

<label for="input1">
    <input id="input1" type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" />
    <a class="overlay" href="#input1">
        Some Text
    </a>
</label>

但是表单操作将不再起作用。因此您必须使用 javascript 提交表单/重定向页面。