HTML不透明度属性vs CSS不透明度

HTML opacity attribute vs CSS opacity

本文关键字：不透明度 CSS vs 属性 HTML      更新时间：2023-09-26

我知道在HTML中设置不透明度有两种不同的方法:

<div opacity="0.5"></div>和

<div style="opacity: 0.5;"></div>

我也知道如何在JavaScript中设置这两个:

div.setAttribute("opacity", 0.5);和

div.style.opacity = 0.5

这两种方法有什么主要区别吗?我应该更喜欢其中一个吗?(我想我至少应该保持一致)

我所知道的唯一的opacity 属性是用于svg的:

例子元素

以下元素可以使用不透明度属性

图形元素[and]<a> <defs><glyph><g><marker><missing-glyph><pattern><svg><switch><symbol>

你的<div opacity="0.5"></div>不能在HTML中工作，因此，要样式化HTML元素，不透明度应该用CSS控制。

CSS总是比Javascript快。如果你可以用CSS做任何事情，那么为什么要浪费时间在Javascript上。

CSS优先级规则规定内联和html属性的优先级高于外部或嵌入式CSS。然而，内联CSS并不是一个好的实践，除非你的项目出于某种原因需要它

适当的CSS不透明度代码: 

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
https://css-tricks.com/almanac/properties/o/opacity/

img {
  /* Theoretically for IE 8 & 9 (more valid) */
  /* ...but not required as filter works too */
  /* should come BEFORE filter */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8
  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=50); // IE 5-7
  /* Modern Browsers */
  opacity: 0.5;
}
相关文章：