个人中心
gpt4 book ai didi

semantic-ui - 如何更改语义 UI 背景图像

转载 作者：行者123 更新时间：2023-12-04 19:53:22 25 4
gpt4 key购买 nike 

<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <!-- Site Properities -->
  <title>Home | Dr.PRB</title>
  <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/site.css">

  <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/image.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/menu.css">

  <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/dropdown.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/button.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/list.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/sidebar.css">
  <link rel="stylesheet" type="text/css" href="../dist/components/transition.css">

  <style type="text/css">

    .hidden.menu {
      display: none;
    }

    .masthead.segment {
      min-height: 700px;
      padding: 1em 0em;
    }
    .masthead .logo.item img {
      margin-right: 1em;
    }
    .masthead .ui.menu .ui.button {
      margin-left: 0.5em;
    }
    .masthead h1.ui.header {
      margin-top: 3em;
      margin-bottom: 0em;
      font-size: 4em;
      font-weight: normal;
    }
    .masthead h2 {
      font-size: 1.7em;
      font-weight: normal;
    }

    .ui.vertical.stripe {
      padding: 8em 0em;
    }
    .ui.vertical.stripe h3 {
      font-size: 2em;
    }
    .ui.vertical.stripe .button + h3,
    .ui.vertical.stripe p + h3 {
      margin-top: 3em;
    }
    .ui.vertical.stripe .floated.image {
      clear: both;
    }
    .ui.vertical.stripe p {
      font-size: 1.33em;
    }
    .ui.vertical.stripe .horizontal.divider {
      margin: 3em 0em;
    }

    .quote.stripe.segment {
      padding: 0em;
    }
    .quote.stripe.segment .grid .column {
      padding-top: 5em;
      padding-bottom: 5em;
    }

    .footer.segment {
      padding: 5em 0em;
    }

    .secondary.pointing.menu .toc.item {
      display: none;
    }

    @media only screen and (max-width: 700px) {
      .ui.fixed.menu {
        display: none !important;
      }
      .secondary.pointing.menu .item,
      .secondary.pointing.menu .menu {
        display: none;
      }
      .secondary.pointing.menu .toc.item {
        display: block;
      }
      .masthead.segment {
        min-height: 350px;
      }
      .masthead h1.ui.header {
        font-size: 2em;
        margin-top: 1.5em;
      }
      .masthead h2 {
        margin-top: 0.5em;
        font-size: 1.5em;
      }
    }


  </style>

  <script src="assets/library/jquery.min.js"></script>
  <script src="../dist/components/visibility.js"></script>
  <script src="../dist/components/sidebar.js"></script>
  <script src="../dist/components/transition.js"></script>
  <script>
  $(document)
    .ready(function() {

      // fix menu when passed
      $('.masthead')
        .visibility({
          once: false,
          onBottomPassed: function() {
            $('.fixed.menu').transition('fade in');
          },
          onBottomPassedReverse: function() {
            $('.fixed.menu').transition('fade out');
          }
        })
      ;

      // create sidebar and attach to menu open
      $('.ui.sidebar')
        .sidebar('attach events', '.toc.item')
      ;

    })
  ;
  </script>
</head>
<body>

<!-- Following Menu -->
<div class="ui large top fixed hidden menu">
  <div class="ui container">
    <div class="header item">
      <img src="assets/images/dentlogo.png" class="logo">
    </div>
    <a class="active item">Home</a>
    <a class="item" href="services.html">Services</a>
    <a class="item">FAQ</a>
    <a class="item">About Me</a>
    <a class="item" href="contact.html">Contact</a>
  </div>
</div>

<!-- Sidebar Menu -->
<div class="ui vertical inverted sidebar menu">
    <div class="header item">
      <img src="assets/images/dentlogo.png" class="logo">
    </div>
  <a class="active item">Home</a>
  <a class="item" href="services.html">Services</a>
  <a class="item">FAQ</a>
  <a class="item">About Me</a>
  <a class="item" href="contact.html">Contact</a>
</div>


<!-- Page Contents -->
  <div class="ui inverted vertical masthead center aligned segment" background="assets/images/dentistplace.jpg">

    <div class="ui container">
      <div class="ui large secondary inverted pointing menu">
        <a class="toc item">
          <i class="sidebar icon"></i>
        </a>
        <div class="header item">
        <img src="assets/images/dentlogo.png" class="logo">
        </div>
        <a class="active item">Home</a>
        <a class="item" href="services.html">Services</a>
        <a class="item">FAQ</a>
        <a class="item">About Me</a>
        <a class="item" href="contact.html">Contact</a>
      </div>
    </div>

    <div class="ui text container">
      <h1 class="ui inverted header">
        Imagine-a-Company
        <img src="">
      </h1>
      <h2>Do whatever you want when you want to.</h2>
      <div class="ui huge primary button">Get Started <i class="right arrow icon"></i></div>
    </div>

  </div>


  <div class="ui vertical stripe segment" >
    <div class="ui middle aligned stackable grid container">
      <div class="row">
        <div class="eight wide column">
          <h3 class="ui header">We Provide Quality Services</h3>
          <p>We assure you the highest quality of dental treatment plan with the right and best equipments in the field of dentistry. We treat our customers with satisfaction serving them great food and beverages while waiting for their appointment.</p>
          <h3 class="ui header">We Value Our Patients</h3>
          <p>We always listen to our patients concern, and perform the highest quality of diagnostic procedure in order to provide the best quality of treatment for their needs.</p>
        </div>
        <div class="six wide right floated column">
          <img src="assets/images/dentistplace.jpg" class="ui large bordered rounded image">
        </div>
      </div>
      <div class="row">
        <div class="center aligned column">
          <a class="ui huge button" href="services.html">Check Them Out</a>
        </div>
      </div>
    </div>
  </div>


  <div class="ui vertical stripe quote segment">
    <div class="ui equal width stackable internally celled grid">
      <div class="center aligned row">
        <div class="column">
          <h3>"They keep their promise in giving the quality of service."</h3>
          <p>Anonymous</p>
        </div>
        <div class="column">
          <h3>"If not the best. One of the best!"</h3>
          <p>
            <img src="assets/images/avatar/tom.jpg" class="ui avatar image"> <b>Mark Acdan</b> 3rd Year Computer Science Student
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="ui vertical stripe segment">
    <div class="ui text container">
      <h3 class="ui header">Different types of Dental Fillings</h3>
      <p>You are maybe know that there are only one type of dental filling and that is mostly termed as <b>'Pasta'</b>. But did you know that there are various types of dental fillings? Check it out now!</p>
      <a class="ui large button">Read More</a>
      <h4 class="ui horizontal header divider">
        <a href="#">Trivias</a>
      </h4>
      <h3 class="ui header">Types of Braces</h3>
      <p>Yes I know you probably heard about braces because they're quite the trend now these days. But did you know that there are different of braces that depends on the case of the patient.</p>
      <a class="ui large button">Read More</a>
    </div>
  </div>


   <div class="ui inverted vertical footer segment">
    <div class="ui center aligned container">
      <div class="ui stackable inverted divided grid">
        <div class="three wide column">
          <h4 class="ui inverted header">About</h4>
          <div class="ui inverted link list">
            <a href="#" class="item">Site Map</a>
            <a href="#" class="item">Services</a>
            <a href="#" class="item">FAQ</a>
            <a href="#" class="item">Developers</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header">Services</h4>
          <div class="ui inverted link list">
            <a href="#" class="item">Tooth Extraction</a>
            <a href="#" class="item">Airway and Dental Sleep Medicine</a>
            <a href="#" class="item">Craniofacial Pain</a>
            <a href="#" class="item">TMJ Dysfunctional Management</a>
          </div>
        </div>
        <div class="ten wide column">
        <center>
          <h4 class="ui inverted header">Dr. Pamela B. Rivera</h4>
          <p>Specialized in Airway and Dental Sleep Medicine | Craniofacial Pain | TMJ Dysnfunctional Management</p>
          </center>
        </div>
      </div>
      <div class="ui inverted section divider"></div>
      <img src="assets/images/dentlogo.png" class="ui centered mini image">
      <div class="ui horizontal inverted small divided link list">
        <a class="item" href="#">Site Map</a>
        <a class="item" href="#">Contact Us</a>
        <a class="item" href="#">Terms and Conditions</a>
        <a class="item" href="#">Privacy Policy</a>
      </div>
    </div>
  </div>
</div>

</body>

</html>

所以我是语义 UI 的新手，我正在试验主页，我想更改顶部黑色的背景图像。
不是导航栏，而是整个黑色，就像语义 UI 网站中的整个内容一样。希望你能帮我!

最佳答案

删除 background="assets/images/dentistplace.jpg"来自 <div class="ui inverted vertical masthead center aligned segment"
添加 landing-image到那个 div 的样式列表。 landing-image是一个类名，你可以命名任何你想要的名字。

在您的页面样式中定义 landing-image类(class)。你可以把它放在.masthead.segment {之前

定义 landing-image像这样:

.landing-image {
    background-image: url('assets/images/dentistplace.jpg') !important;
    background-size: cover !important;
}

关于semantic-ui - 如何更改语义 UI 背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33045480/

25 4 0
文章推荐： haskell - FromJSON 实例的单例、类型族和存在类型
文章推荐： sql - MS Access 选择按多个字段分组的前 n 个查询
文章推荐： elixir - Phoenix 框架 : Send rendered template in JSON response
文章推荐： OIM - 根据权利请求配置帐户
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com