如何在图像出现时添加边框？

Question

我有一个选择图像的按钮，我有一个空间，我想显示该图像的预览。这个空间就在那个按钮的上方。 现在，我想在此图片上添加dashed边框，边框opacity应为0.47。但问题是我已经在我的代码中插入了图像标记，我只是使用JS＆amp; amp;动态更改<img src="">。这就是为什么我甚至可以在选择图像之前看到边框。

我想要这样的事情：

当图像完全没有时，就像这样：

但是图像不存在它在帖子按钮上方显示一个小边框，如下所示：

这是我的HTML / PHP代码：

<div>
 <div id="post-image-content">
 <div id="post-image-div">
 <img id="blah" class="post-image" alt=" " width="100" height="100"/>
 <img id="closes" class="close-button-image" src="<?php echo $this->webroot.'mainsite/img/img-close.png'?>" />
  </div>
  </div>


 <a href="#">
 <i class="fa fa-camera" aria-hidden="true" id="capture_image_01"></i>
 </a>
 <?php echo $this->Form->input('cover_image_url', array('type' => 'file','onchange' => 'document.getElementById(\'blah\').src = window.URL.createObjectURL(this.files[0])','style' => array("display:none"),'label' => false, 'div' => false));?>

</div>

这是我的CSS

.post-image {
    margin-bottom: 10px;
margin-left: 10px;
border-radius: 4px;
opacity: 0.5;
border: 2px dashed rgba(20, 134, 171, 0.47);
padding: 3px;


}
#post-image-content {
display: block;
overflow: hidden;
}

#post-image-div {
 position:relative;
z-index:0;
float: right;
margin: 2px 2px;

}

#post-image-div:hover .close-button-image {
    position: absolute;
right: 6px;
top: 8px;
 display: block !important; 
z-index: 1;
height: 10px;
width: 10px;
}


.close-button-image {
      position: absolute;
right: 6px;
top: 8px;
display: none;
z-index: 1;
height: 10px;
width: 10px;
}

任何帮助都会受到高度赞赏，因为我现在还没有任何线索。

Answer 1

如果没有显示默认图像或img标记

，您可以在图像之前添加条件

.full-card {
     width: 100%; /* or try width: 100vw; */
}

或仅向该类添加条件（应用所需的css）

<md-card class="full-card">
    <md-card-content>
        <h2>Settings</h2>
        <section class="form-section">
            <md-slide-toggle>Toggle Theme</md-slide-toggle>
        </section>
    </md-card-content>
</md-card>

Answer 2

    

#post-image-div{
	border: 2px dashed rgba(20, 134, 171, 0.47);
	padding:2px;
	border-radius:3px;
}

#post-image-div img,#post-image-div{
	width:100px;
	height:100px;
 

<div id="post-image-div">
    <img id="closes" class="close-button-image" src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" />
</div>

试试这段代码