使图形覆盖css_Css_Overlay - Fatal编程技术网

使图形覆盖css

css

使图形覆盖css,css,overlay,Css,Overlay,我有以下图片：它有一个深灰色的背景和上面的一种覆盖的数字。（像钻石一样）我想知道是否可以通过CSS实现图形的叠加有什么想法吗谢谢您使用z-indexz索引：int（int是c的一个数字）较高的值将显示在具有较小值的其他对象的上方/上方此标记非常基本，因此我不确定它是否是您想要的。创建单个可重复矩形的图像，然后使用以下CSS： body { background-image: url("background.png"); background-repeat: repeat

我有以下图片：

它有一个深灰色的背景和上面的一种覆盖的数字。（像钻石一样）

我想知道是否可以通过CSS实现图形的叠加

有什么想法吗

谢谢您使用z-index<代码>z索引：int（int是c的一个数字）
较高的值将显示在具有较小值的其他对象的上方/上方
此标记非常基本，因此我不确定它是否是您想要的。

创建单个可重复矩形的图像，然后使用以下CSS：

body {
    background-image: url("background.png");
    background-repeat: repeat;
}

今天，我为上述问题创建了一个覆盖图像

有两个文件： 1.Overlay.html 2.Overlay.css

步骤： 1.在Overlay.html中，通过以下代码为Overlay imageby创建链接：

<a href="#overlay"><img src="images/angularjs.png"></a>

.overlay {
         position: fixed;               /* This property is fixed the image on overlay  */
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: rgba(10, 10, 200, 0.8);        /* For giving background color and opticity  */
     z-index: 99999;
     opacity:0;
        -webkit-transition: opacity 400ms ease-in;
     -moz-transition: opacity 400ms ease-in;
     transition: opacity 400ms ease-in;
     pointer-events: none;
    }


.overlay:target {
    opacity:1;
            pointer-events: auto;
    }


.overlay > div {
     width: 400px;
     position: relative;
     margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        }

在最后一步中，.关闭已创建的css类： .结束{ 背景：红色；颜色：#FFFFFF；线高：25px；位置：绝对位置；右：-12px；文本对齐：居中；顶部：-10px；宽度：24px；文字装饰：无；字体大小：粗体； -webkit边界半径：12px； -moz边界半径：12px；边界半径：12px； -莫兹盒阴影：1px 1px 3px#000； -网络工具包盒阴影：1px 1px 3px#000；盒影：1px 1px 3px#000； }

    .close:hover {
         background: #00d9ff;
      }

Html文件：

 <!DOCTYPE html>
   <html lang="en">
     <head>
        <meta charset="UTF-8">
        <title>Overlay Images</title>
        <link rel="stylesheet" href="custom.css">
    </head>
    <<a href="#overlay"><img src="images/angularjs.png"></a>

      <div id="overlay" class="overlay">
          <div> 
             <a href="#close" title="Close" class="close">X</a>
             <img src="images/angularjs.jpg">
           </div>
      </div>
   </body>
  </html>

深灰色背景和上面的一种叠加图形。我看不到这些图形。这些图形像钻石或菱形。如果

钻石

或

菱形

是用html/css创建的，那么我认为是可能的。您可以显示

钻石

或

菱形

的html/css吗？好的。但是覆盖背景灰色的对象，这个对象，可以通过css来完成吗？这是我的问题。据我所知，它不能，但您可以使用html

标记。编辑：已删除使用链接的尝试tag@user3810167这可能是最简单的方法，您可以查看CSS 3渐变和变换。

      .overlay {
             position: fixed;
             font-family: Arial, Helvetica, sans-serif;
             top: 0;
             right: 0;
             bottom: 0;
             left: 0;
             background: rgba(10, 10, 200, 0.8);
             z-index: 99999;
             opacity:0;
             -webkit-transition: opacity 400ms ease-in;
             -moz-transition: opacity 400ms ease-in;
              transition: opacity 400ms ease-in;
              pointer-events: none;
          }


      .overlay:target {
               opacity:1;
               pointer-events: auto;
                 }



        .overlay > div {
                   width: 400px;
                   position: relative;
                   margin: 10% auto;
                   padding: 5px 20px 13px 20px;
                   border-radius: 10px;
               }


          .close {
                background: red;
                color: #FFFFFF;
                line-height: 25px;
                position: absolute;
                right: -12px;
                text-align: center;
                top: -10px;
                width: 24px;
                text-decoration: none;
                font-weight: bold;
                -webkit-border-radius: 12px;
                -moz-border-radius: 12px;
                 border-radius: 12px;
                -moz-box-shadow: 1px 1px 3px #000;
                -webkit-box-shadow: 1px 1px 3px #000;
                 box-shadow: 1px 1px 3px #000;
               }
                 .close:hover {
                     background: #00d9ff;
                       }