gpt4 book ai didi

css - 如何在页面上应用背景?

转载 作者:行者123 更新时间:2023-11-28 03:11:56 25 4
gpt4 key购买 nike

我想在我的网站页面上应用不同的背景。

以下代码将硬背景应用于所有产品页面:

body.path-product {
background-image: url("/themes/contrib/bootstrap_subtheme_front_office/images/background-page.svg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}

我想为 product/add/produit 路径应用不同的背景。如何做到这一点?

截图:

enter image description here

在我的主题中,我创建了一个文件“html--product--add.html.twig”,并粘贴了“html.html.twig”的内容。

{#
/**
* @file
* Default theme implementation to display the basic html structure of a single
* Drupal page.
*
* Variables:
* - $css: An array of CSS files for the current page.
* - $language: (object) The language the site is being displayed in.
* $language->language contains its textual representation.
* $language->dir contains the language direction. It will either be 'ltr' or
* 'rtl'.
* - $rdf_namespaces: All the RDF namespace prefixes used in the HTML document.
* - $grddl_profile: A GRDDL profile allowing agents to extract the RDF data.
* - $head_title: A modified version of the page title, for use in the TITLE
* tag.
* - $head_title_array: (array) An associative array containing the string parts
* that were used to generate the $head_title variable, already prepared to be
* output as TITLE tag. The key/value pairs may contain one or more of the
* following, depending on conditions:
* - title: The title of the current page, if any.
* - name: The name of the site.
* - slogan: The slogan of the site, if any, and if there is no title.
* - $head: Markup for the HEAD section (including meta tags, keyword tags, and
* so on).
* - $styles: Style tags necessary to import all CSS files for the page.
* - $scripts: Script tags necessary to load the JavaScript files and settings
* for the page.
* - $page_top: Initial markup from any modules that have altered the
* page. This variable should always be output first, before all other dynamic
* content.
* - $page: The rendered page content.
* - $page_bottom: Final closing markup from any modules that have altered the
* page. This variable should always be output last, after all other dynamic
* content.
* - $classes String of classes that can be used to style contextually through
* CSS.
*
* @ingroup templates
*
* @see bootstrap_preprocess_html()
* @see template_preprocess()
* @see template_preprocess_html()
* @see template_process()
*/
#}
{%
set body_classes = [
logged_in ? 'user-logged-in',
not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
node_type ? 'page-node-type-' ~ node_type|clean_class,
db_offline ? 'db-offline',
theme.settings.navbar_position ? 'navbar-is-' ~ theme.settings.navbar_position,
theme.has_glyphicons ? 'has-glyphicons',
]
%}
<!DOCTYPE html>
<html {{ html_attributes }}>
<head>
<head-placeholder token="{{ placeholder_token|raw }}">
<title>{{ head_title|safe_join(' | ') }}</title>
<css-placeholder token="{{ placeholder_token|raw }}">
<js-placeholder token="{{ placeholder_token|raw }}">
</head>
<body{{ attributes.addClass(body_classes) }}>
<a href="#main-content" class="visually-hidden focusable skip-link">
{{ 'Skip to main content'|t }}
</a>
{{ page_top }}
{{ page }}
{{ page_bottom }}
<js-bottom-placeholder token="{{ placeholder_token|raw }}">
</body>
</html>

如何将类“body.path-product-add”放入这个文件中?

最佳答案

你好@ZenImagine,

You can use another class for your body that corresponds that page.

如果我站在你这边,我会使用 jquery 使特定页面的正文背景不同。请参见下面的代码。它对我有用。

JQUERY

$(window).load(function(){
var x = window.location.href;
if(x == "full path link of the specific page"){
$('body').addClass('productback');
}
});

CSS

body.productback{
background-image: url("your background image") !important;
}

关于css - 如何在页面上应用背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45666381/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com