将图像完全不透明地放在桌子上方

时间：2019-01-04 20:35:37

标签： html5 css3

我想将附加的图像不透明地放在桌子上方。在我的实际代码中，表格具有可点击的链接，因此要禁用该功能，我需要将此图像放置在表格上方。图像应该放在桌子上的透明容器中。 问题1：图像未放置在桌子上方（整个），而是显示在桌子下方 问题2：图片应采用某种div或某种形式，以便它可以覆盖整个表格。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  font-size: 17px;
}

.container {
  position: absolute;
  max-width;400px;
}

.container img {vertical-align: middle;}

.container .content {
position:relative;
  top: 0;
  left:0;
  bottom: 0;
  right: 0;  
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(255, 255, 255, 0.5); /* Black background with 0.5 opacity */  

font-size: 50px; 
text-align: center; 
font-style: italic; 
padding: 40px; 
padding-top: 180px; 
color: grey;
    /* Rotate div */
    -ms-transform: rotate(-25deg); /* IE 9 */
    -webkit-transform: rotate(-25deg); /* Chrome, Safari, Opera */
    transform: rotate(-25deg);
}
</style>
</head>
<body>

<h2>Responsive Image with Transparent Text</h2>

<div class="container"> 
<TABLE width="800px">
<TR>
	<TD>Test</TD>
	<TD>Test</TD>
	<TD>Test</TD>
</TR>
<TR>
	<TD>Test</TD>
	<TD>Test</TD>
	<TD>Test</TD>
</TR>
<TR>
	<TD>Test</TD>
	<TD>Test</TD>
	<TD>Test</TD>
</TR>
<TR>
	<TD>Test</TD>
	<TD>Test</TD>
	<TD>Test</TD>
</TR>
<TR>
	<TD>Test</TD>
	<TD>Test</TD>
	<TD>Test</TD>
</TR>
</TABLE>
  <div class="content">    
    <IMG SRC="ComingSoon.png" WIDTH="548" HEIGHT="53" BORDER="0" ALT="">
  </div>
</div>

</body>
</html>

Image file for code snippet

2 个答案:

答案 0 :(得分：1)

您的定位和CSS规则可能与您要实现的目标有点偏离。

您对内容div和其中的图像混合了一些CSS规则。如果需要旋转图像，则应仅将其应用于img标签，并将填充和背景颜色仅集中在div上以覆盖整个表格，而不会影响图像栏。您可以将内容div和img都保持在适当的位置：绝对值，以使它们覆盖表格并彼此覆盖，然后可以随意将它们移动到友好位置（还要确保div与您尝试的内容一样宽覆盖）。

这是我的主张，可能需要对图像的大小和位置进行一些调整，但我认为这与您所描述的很接近。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      box-sizing: border-box;
    }
    
    body {
      font-family: Arial;
      font-size: 17px;
    }
    
    .container {
      position: absolute;
      max-width: 800px;
    }
    
    .container img {
      position: absolute;
      top: 10%;
      left: 25%;
      vertical-align: middle;
      /* Rotate div */
      -ms-transform: rotate(-25deg);
      /* IE 9 */
      -webkit-transform: rotate(-25deg);
      /* Chrome, Safari, Opera */
      transform: rotate(-25deg);
    }
    
    .container .content {
      position: absolute;
      top: 0;
      left: 0;
      background: rgb(0, 0, 0);
      /* Fallback color */
      background: rgba(255, 255, 255, 0.5);
      /* Black background with 0.5 opacity */
      font-size: 50px;
      width: 100%;
      text-align: center;
      font-style: italic;
      color: grey;
    }
  </style>
</head>

<body>

  <h2>Responsive Image with Transparent Text</h2>

  <div class="container">
    <div class="content">
      <IMG SRC="https://i.stack.imgur.com/ixqmn.png" WIDTH="200" HEIGHT="53" BORDER="0" ALT="">
    </div>
    <TABLE width="800px">
      <TR>
        <TD>Test</TD>
        <TD>Test</TD>
        <TD>Test</TD>
      </TR>
      <TR>
        <TD>Test</TD>
        <TD>Test</TD>
        <TD>Test</TD>
      </TR>
      <TR>
        <TD>Test</TD>
        <TD>Test</TD>
        <TD>Test</TD>
      </TR>
      <TR>
        <TD>Test</TD>
        <TD>Test</TD>
        <TD>Test</TD>
      </TR>
      <TR>
        <TD>Test</TD>
        <TD>Test</TD>
        <TD>Test</TD>
      </TR>
    </TABLE>
  </div>

</body>

</html>

答案 1 :(得分：1)

好吧，通过在图片上放置链接来使链接不可点击是一种不可靠的解决方案，但是我应该判断谁？我们都知道有时会出现一些情况，在这种情况下，快速，可靠的解决方案绰绰有余... ;-) 所以你去了：

1。交换position和.container的{​​{1}}属性。

（使.container .content .container和relative .container .content。）

制作absolute .container .content会将其放在桌子上。

从技术上讲，您也可以离开absolute .container，但我建议您不要这样做，因为CSS中的定位方式是这样的：absolute不一定是页，但在下一个 positioned 祖先中， positioned 的意思是“具有absolute属性”。 （如果没有定位的祖先，则以position为参考。） 因此，body的位置很重要，否则图像也会阻塞标题。为此，只需为其提供一个具有任何值的position属性就足够了。但是.container在这种情况下是一个更安全的值，因为它实际上并不会影响元素的位置，除非您还给出了relative / left / right或top属性。另一方面，bottom可能会干扰您的整体页面布局。

2。不要旋转absolute，而要旋转.container .content。

旋转.container .content img使其部分阻塞标题。

3。从.container .content中删除bottom: 0和right: 0。

虽然实际上并不需要执行此步骤，但是这些属性已过时。您要么要从顶部或底部开始，要么从左侧或右侧开始给出元素的位置。 如果同时提供这两个属性，浏览器将只忽略其中一个（可能是第一个）。

我希望我的解释是可以理解的... :-D

干杯！

相关问题
最新问题