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

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

转载作者：行者123 更新时间：2023-12-04 19:53:22

<!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/

文章推荐： haskell - FromJSON 实例的单例、类型族和存在类型

文章推荐： sql - MS Access 选择按多个字段分组的前 n 个查询

文章推荐： elixir - Phoenix 框架 : Send rendered template in JSON response

文章推荐： OIM - 根据权利请求配置帐户

javascript 语义
我正在尝试提升我的 javascript 编程技能(或者说我的编程技能时期 :)) 所以我试图理解一些语义: 第一行的“?”是什么意思？均值和“-distance”中的减号第二行中的“+=”或“-=
语义 UI 中的复选框
我正在尝试在语义 UI 中执行复选框，但它不起作用，我无法弄清楚我做错了什么。我包括jquery、semantic.min.js、checkbox.js 和semantic.min.css，然后我添
Java 语义 - 有没有办法写得更好？
我正在构建一个 Spring 后端。我有一个 Controller ，它获取一个“搜索对象” - 一个具有 10 个字段的对象，其中只有一个应该被填充，所以搜索功能(我没有编写，但需要对其进行更改和重
sql - 获取相关文章的高级方法(语义)
我面临着编写更智能/高级的“相关内容”算法的挑战，并且不知道从哪里开始，所以我决定提出一个问题，是否有人会指出我正确的方向。我们的数据库包含很多文章，到目前为止，我们使用关键字/标签查询了相关文章，
generics - 有没有一种方法可以实现与泛型相结合的 `as`语义？
我正在尝试将通用字符串写入Rust中的数字函数，其中支持的类型为i16，i32，i64，u32，u64，f32和f64。最初我有这个: fn str_to_num(s: &str, default_
在析构函数中对唯一指针调用重置的 C++ 语义
假设我们在 hpp 文件中有一个带有唯一指针的简单结构: struct SomeType { SomeType() = default; ~SomeType(); st
C++ #include 语义
这是同一预处理指令的多个问题。 1 - <> 还是 ""？除了在 MSDN 中找到的信息: #include Directive (C-C++) 1.a:这两种符号有什么区别？ 1.b:所有编译器都
javascript - 通过js添加html标签/语义
所以基本上我有一个带有列表的简单系统，当我选择一个项目时，它会显示描述和绑定(bind)到该项目的图像。项目:https://jsfiddle.net/jhnjcddh/2/ 问题是我需要在 JS
Python 语义 - for 循环声明中的多个参数
很抱歉问了一个愚蠢的问题，但有人能告诉我以下是什么意思吗 for ctype, (codename, name) in searched_perms: 我不明白括号里是怎么回事。 for ctype
c++ - 传递函数指针——语义
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Why do all these crazy function pointer definitions al
多个导航元素的 HTML5 语义？
我正在学习 HTML5，并获得了一个将 CSS Zen Gardens 转换为 HTML5 语义版本的项目。我已经能够轻松地转换其中的大部分内容，但是底部的链接/导航给我带来了一些问题。转换此/处理
用于显示数据库中的标签和内容的 HTML 语义
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improv
c++ - 语义，cedet如何强制解析源文件
我一直在我的 emacs c/c++ 开发设置中试验 cedet 和语义，除了一个小细节外，我对它非常满意。我使用 ede-cpp-root-project 创建一个项目，并给出我的项目的根目录以及
HTTP PUT 语义
引用问题自http://www.garfieldtech.com/blog/put-up-with-put (这是针对 Drupal 开源项目的，有点元，因为这里没有代码): GET、HEAD 和 P
Swift map 语义
我有以下代码。 let v_blue = UIView() v_blue.backgroundColor = UIColor.blueColor() l
关于字典访问的 Swift 语义
我目前正在 objc.io 上阅读优秀的 Advanced Swift 书籍，但遇到了一些我不明白的问题。如果您在操场上运行以下代码，您会注意到在修改字典中包含的结构时，下标访问会生成一个副本，但随
Flutter - 语义 - 解释
谁能给我一个关于 Flutter 上下文中语义概念的清晰解释(或链接)(它实际上是什么，何时使用，更新...)？我在谷歌上搜索了很多，但到目前为止还没有找到任何好的解释。非常感谢，最佳答案 Di
css - 语义 UI 消息列表未正确显示
这是我的代码 Was this what you wanted? It's good to see you again.
html - 语义 HTML - 边栏导航
我有一个侧边栏，其中包含应用程序的主导航。它还包含一个 button 触发侧边栏的打开/关闭。在语义方面，标记应该是什么样的？我应该把侧边栏放在一边，然后只在周围设置导航吗主导航，不包括打开/关闭触
emacs - 跨线的“语义”运动
考虑下面这行 Lisp 代码: (some-function 7 8 | 9) ;; some comment. note the extra indentation 该点位于“8”和

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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