Question

您好我有一个关于水印的问题。

我有这段代码

＆＃13;

.home-custom-grid{
        padding: 0px;
        height: 10%;
        min-height: 30px;
        background-color: #000f35;
    }
     .home-tile-grid{
        height: 25%;
        margin-top: -1px;
        min-height: 100px;
    }
     .custom-home-row{
        display: table;
        width: 100%;
        height: 100%;
    } 
    .custom-home-col{
        display: table-cell;
        vertical-align: middle;
    }
    .home-grid-title{
        margin-top: 15px;
        color: #ffffff;
        font-size: 16px;
    }
.faint-blue{
   background-color:#042E94;
   color: white;
}
.dark-blue{
     background-color:#011A5C;
     color: white;
}
.coustom-watermark-row{
        position: relative;
        background-image:url('http://www.isoimplant.com/Areas/Admin/images/logo.png');    
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10%;
    }

＆＃13;

<ion-grid class="home-custom-grid home-tile-grid">
            <ion-row class="custom-home-row coustom-watermark-row">
                <ion-col col-6 text-center class="faint-blue custom-home-col" (click)="goToAnotherPage(Page1)">
                    <div class="common-image-setter in-group-icon"></div>
                    <div class="home-grid-title">Membership</div>
                </ion-col>
                <ion-col col-6 text-center class="dark-blue custom-home-col" (click)="goToAnotherPage(Page2)">
                    <div class="common-image-setter article-blog-journal-icon"></div>
                    <div class="home-grid-title">learn about</div>
                </ion-col>
            </ion-row>
        </ion-grid>

＆＃13;

如果看到输出。背景图片隐藏在会员资格下并了解列。

我希望背景图片看起来像水印

Like this。

如果有人知道如何实施它，那么请你建议我或指导。

Answer 1

我会使用伪代码将图像放在内容之上。

.home-custom-grid {
  padding: 0px;
  height: 10%;
  min-height: 30px;
  background-color: #000f35;
}

.home-tile-grid {
  height: 25%;
  margin-top: -1px;
  min-height: 100px;
}

.custom-home-row {
  display: table;
  width: 100%;
  height: 100%;
}

.custom-home-col {
  display: table-cell;
  vertical-align: middle;
}

.home-grid-title {
  margin-top: 15px;
  color: #ffffff;
  font-size: 16px;
}

.faint-blue {
  background-color: #042E94;
  color: white;
}

.dark-blue {
  background-color: #011A5C;
  color: white;
}

.coustom-watermark-row {
  position: relative;
}

.coustom-watermark-row:after {
  content: url('http://www.isoimplant.com/Areas/Admin/images/logo.png');
  position: absolute;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5, 0.5);
  opacity: .1;
}

<ion-grid class="home-custom-grid home-tile-grid">
  <ion-row class="custom-home-row coustom-watermark-row">
    <ion-col col-6 text-center class="faint-blue custom-home-col" (click)="goToAnotherPage(Page1)">
      <div class="common-image-setter in-group-icon"></div>
      <div class="home-grid-title">Membership</div>
    </ion-col>
    <ion-col col-6 text-center class="dark-blue custom-home-col" (click)="goToAnotherPage(Page2)">
      <div class="common-image-setter article-blog-journal-icon"></div>
      <div class="home-grid-title">learn about</div>
    </ion-col>
  </ion-row>
</ion-grid>

Answer 2

如果要查看背景颜色

，则应在背景颜色上使用opacity属性

.home-custom-grid{
        padding: 0px;
        height: 10%;
        min-height: 30px;
        background-color: #000f35;
    }
     .home-tile-grid{
        height: 25%;
        margin-top: -1px;
        min-height: 100px;
    }
     .custom-home-row{
        display: table;
        width: 100%;
        height: 100%;
    } 
    .custom-home-col{
        display: table-cell;
        vertical-align: middle;
    }
    .home-grid-title{
        margin-top: 15px;
        color: #ffffff;
        font-size: 16px;
    }
.faint-blue{
   background-color:rgba(0, 15, 53, 0.7);
   color: white;
}
.dark-blue{
     background-color:rgba(1, 26, 92, 0.7);
     color: white;
}
.coustom-watermark-row{
        position: relative;
        background-image:url('http://www.isoimplant.com/Areas/Admin/images/logo.png');    
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10%;
    }

<ion-grid class="home-custom-grid home-tile-grid">
            <ion-row class="custom-home-row coustom-watermark-row">
                <ion-col col-6 text-center class="faint-blue custom-home-col" (click)="goToAnotherPage(Page1)">
                    <div class="common-image-setter in-group-icon"></div>
                    <div class="home-grid-title">Membership</div>
                </ion-col>
                <ion-col col-6 text-center class="dark-blue custom-home-col" (click)="goToAnotherPage(Page2)">
                    <div class="common-image-setter article-blog-journal-icon"></div>
                    <div class="home-grid-title">learn about</div>
                </ion-col>
            </ion-row>
        </ion-grid>

Answer 3

我修改了你的代码。希望它有所帮助。

.home-custom-grid{
	padding: 0px;
	height: 10%;
	min-height: 100px;
	background-color: #000f35;
}

.home-tile-grid{
	height: 25%;
	margin-top: -1px;
	min-height: 500px;
}

 .custom-home-row{
	display: table;
	width: 100%;
	height: 100%;
} 
.custom-home-col{
	display: table-cell;
	vertical-align: middle;
}

.home-grid-title{
	margin-top: 15px;
	color: #ffffff;
	font-size: 16px;
}
.faint-blue{
   background-color:#042E94;
   color: white;
}
.dark-blue{
	 background-color:#011A5C;
	 color: white;
}

.coustom-watermark-row::after{
  content: "";
  position: absolute;
  background:url(http://www.isoimplant.com/Areas/Admin/images/logo.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20%;
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999; 
 }

.coustom-watermark-row{        
    width: 300px;
    height: 100px;
    display: block;
    position: relative;
}

<div class="coustom-watermark-row">
<ion-grid class="home-custom-grid home-tile-grid ">
    <ion-row class="custom-home-row">
      <ion-col col-6 text-center class="faint-blue custom-home-col" (click)="goToAnotherPage(Page1)">
         <div class="common-image-setter in-group-icon"></div>
         <div class="home-grid-title">Membership</div>
       </ion-col>
       <ion-col col-6 text-center class="dark-blue custom-home-col" (click)="goToAnotherPage(Page2)">
         <div class="common-image-setter article-blog-journal-icon"></div>
         <div class="home-grid-title">learn about</div>
       </ion-col>
     </ion-row>
</ion-grid>
</div>

在行的背景图象的重叠的专栏

3 个答案: