语义UI模态背景​​图像

Question

Semantic-UI Modal可以有背景图像吗？

<modal ng-model="dc.show_leaderboard" class="leaderBoard">
   <i class="close icon" ng-click="dc.close_modal()"></i>
   <div class="header">Header</div>
</modal>

css：

.leaderBoard{
  background: url('/assets/images/0011mainBG_SmallRobotBG_overlay1364x768.png') no-repeat !important;
  width: 200px;
  left: 90%;
  text-align: center;
  color: white;
}

Answer 1

文档中没有引用，但模型可以

1. 包含图片内容
2. 大小不等
3. 使用整个屏幕尺寸

http://semantic-ui.com/modules/modal.html#/definition

但是通过一些css定制，我们可以

您可以尝试使用此图片背景

 <style>
  .modal {
    background:url('Your path to image')   !important;
   width:200px !important;
   }
 </style>
   <div class="ui view modal  inverted " >
         <div class="header" style="background:none;">User Deletion ?</div>
          <div class="content" style="background:none;">

            <p><?php echo __('Are you sure you want to delete ?'); ?></p>
         </div>
     <div class="actions" style="background:none;">
         <div class="ui cancel button">Cancel</div>
         <div class="ui approve button">OK</div>
    </div>
 </div>

使用彩色背景：

     <div class="ui view modal red inverted segment" >
          <div class="header" style="background:none;">User Deletion ?</div>
          <div class="content" style="background:none;">
             <p><?php echo __('Are you sure you want to delete ?'); ?></p>
         </div>
       <div class="actions" style="background:none;">
         <div class="ui cancel button">Cancel</div>
         <div class="ui approve button">OK</div>
      </div>
   </div>