精华内容
下载资源
问答
  • html设置背景图片自适应

    万次阅读 多人点赞 2019-04-25 17:53:47
    在网上找了很久,终于在一个百度问答里找到正确答案,记录下来,方便以后使用。 在<body>中设置: <body background="images\bg.jpg" style=" background-repeat:no-repeat ;...第一行是图片...

    在网上找了很久,终于在一个百度问答里找到正确答案,记录下来,方便以后使用。
    <body>中设置:

    <body background="images\bg.jpg"
    style=" background-repeat:no-repeat ;
    background-size:100% 100%;
    background-attachment: fixed;"
    >
    

    第一行是图片url
    第二行是背景图片不重复
    第三行是达到窗口的百分百比例
    第四行是图片固定,随着页面滚动而移动

    展开全文
  • HTML背景图片设置

    千次阅读 2020-02-19 22:02:06
    背景:学习前端知识,自己做页面 ...简介:HTML背景图片设置; HTML背景图片设置background-image: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...

    背景:学习前端知识,自己做页面
    目的:学习前端知识
    组网图:不涉及
    工具:vscode1.41.0
    简介:HTML背景图片设置;
    HTML背景图片设置background-image:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            body {
                background-image: url("imgs/btn1.png");
            }
        </style>
    </head>
    <body>
        
    </body>
    </html>
    

    在这里插入图片描述
    HTML背景图片设置 background-repeat:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>love</title>
        <style>
            body {
                background-image: url("imgs/btn1.png");
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        
    </body>
    </html>
    

    在这里插入图片描述
    HTML背景图片设置background-size:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>love</title>
        <style>
            body {
                background-image: url("imgs/btn1.png");
                background-repeat: no-repeat;
                /* background-position: center; */
                background-size: 100px;
            }
        </style>
    </head>
    <body>
        
    </body>
    </html>
    

    在这里插入图片描述
    HTML背景图片设置代码演练:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>love</title>
        <style>
            #box {
                text-align: center;
            }
            a {
                display: inline-block;
    
                width: 160px;
                height: 40px;
    
                background-repeat: no-repeat;
                background-size: 100%;
            }
            #btn1 {
                background-image: url("imgs/btn1.png");
            }
            #btn2 {
                background-image: url("imgs/btn2.png");
            }
            #btn3 {
                background-image: url("imgs/btn3.png");
            }
            #btn4 {
                background-image: url("imgs/btn4.png");
            }
        </style>
    </head>
    <body>
        <div id="box">
            <a id="btn1" href="#"></a>
            <a id="btn2" href="#"></a>
            <a id="btn3" href="#"></a>
            <a id="btn4" href="#"></a>
        </div>
    
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • Android背景图片模糊虚化Demo

    热门讨论 2015-05-20 14:31:21
    目前主流应用都在用的功能,实现背景模糊虚化的样式,看上去很高端大气的样子,希望对你们有帮助。
  • java web项目中如何插入背景图片

    万次阅读 2018-11-12 20:12:59
    对于java可视化界面插入背景图片这个倒是轻而易举,只需要background-inage:url(图片路径就行),而对于与web项目中,我开始时也是采用这种方法,但是不尽然,代码如下: &lt;div class='ban' style="...

          对于java可视化界面插入背景图片这个倒是轻而易举,只需要background-inage:url(图片路径就行),而对于与web项目中,我开始时也是采用这种方法,但是不尽然,代码如下:

    <div class='ban' style="height:100%;background-image:url('/img/qx.jpg')">

    效果如下:

    图片就是不显示,后期我又加了<img alt="" src="/img/qx.jpg">,效果还是和上面一样,也是没有图片显示。后来我仔细想了想,是没有获取到图片真正的路径问题。我们需要获取/img/qx.jpg,

    我们就需要在jsp页面中写Java代码,让Java来获取项目的根路径,通过绝对路径的方式引入这些图片文件。我们则需要在jsp文件的开头写入下面的代码。

    <%
    String path = request.getContextPath();
    String basePath=null;
    basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    int port=request.getServerPort();
    	
    	if(port==80){
    	basePath=request.getScheme()+"://"+request.getServerName()+path;
    	
    	}else{
    		basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
    		
    	}
    	request.setAttribute("basePath", basePath);
    %>

    这几段代码只是获取基本的路径,而request就是我们常说的JSP九大隐式对象之一,JSP就是Servlet,request.setAttribute("basePath", basePath) 表示将得到的basePath(项目根路径)存放到request作用域中,但是到这里我们还是不能把图片显示出来,我们需要在图片路径前面加入这行代码$<basePath>。如下:

    <div class='ban' style="height:100%;background-image:url('${basePath}/img/qx.jpg')">

    看,图片就显示出来了:

    好了,这次就分享到这里了,这里只是一个简单的图片插入问题,若有什么不对的地方,还望指教。

    展开全文
  • Android中View(视图)绘制不同状态背景图片

    千次下载 热门讨论 2012-04-18 20:43:51
    Android中View(视图)绘制不同状态背景图片原理深入分析Android中View(视图)绘制不同状态背景图片原理深入分析Android中View(视图)绘制不同状态背景图片原理深入分析Android中View(视图)绘制不同状态背景图片原理深入...
  • hexo+yilia添加背景图片

    千次阅读 热门讨论 2019-11-13 15:53:49
    同时因为每个人选的背景图片可能有所不同,主体颜色可能差异很大,需要调整的颜色可能比较多,这篇博客仅供参考,请自行选择是否替换背景。


    添加背景图片,效果图:
    file

    注:因为有博客不是修改时写的,部分代码没有进行备份,所以有些只能从git中获取代码,有些可能有点乱。

    同时因为每个人选的背景图片可能有所不同,主体颜色可能差异很大,需要调整的颜色可能比较多,这篇博客仅供参考,请自行选择是否替换背景。

    1.左侧边栏

    取消上半部分的背景颜色

    themes/yilia/layout/_partial/left-col.ejs,如下:这是掉上面的一行代码,使用下面的

    <!-- <div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"> -->
    <!-- 左侧边栏(上半部分)不设置背景颜色 -->
    <div class="overlay" >
    

    添加背景图片

    H:\Hexo\themes\yilia\source\main.0cf68a.css,注释掉原有的背景颜色,添加照片:

    .left-col {
        /* background:#fff; */
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url('http://bucket836.oss-cn-shenzhen.aliyuncs.com/wallpaper/381535373.jpeg') no-repeat 0% 20%/ cover;
        width:300px;
        position:fixed;
        opacity:1;
        transition:all .3s ease-in;
        -ms-transition: all .3s ease-in;
        height:100%;
        z-index:999
    }
    

    根据背景图片修改字体颜色(这步可以自定义),我是将color:#696969改成color:#673ab7:git

     .left-col #header a {
    -    color:#696969
    +    color:#673ab7^M
     }
     .left-col #header a:hover {
    -    color:#b0a0aa
    +    color: #03A9F4^M
     }
     .left-col #header .header-subtitle {
         text-align:center;
    -    color:#999;
    +    color:#673ab7;
         font-size:18px;
    

    2.右边的文章

    调整背景颜色为透明

    主要是将白色背景变成透明的,background:#fff;–>background: rgba(255,255,255,.5);调整后Git

     .article {
    -    margin:30px;
    -    position:relative;
    -    border:1px solid #ddd;
    -    border-top:1px solid #fff;
    -    border-bottom:1px solid #fff;
    -    background:#fff;
    -    /* background: rgba(255,255,255,.5); */
    -    transition:all .2s ease-in
    +    margin: 30px;^M
    +    border: 1px solid #ddd;^M
    +    border-top: 1px solid #fff;^M
    +    border-bottom: 1px solid #fff;^M
    +    background: rgba(255,255,255,.5);^M
    +    transition: all .2s ease-in^M
     }
    

    即:

    .article {
        margin: 30px;
        border: 1px solid #ddd;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        background: rgba(255,255,255,.5);
        transition: all .2s ease-in
    }
    

    取消右侧栏背景颜色

    (2019-11-18补充)该背景可能会遮住全局背景,因此应该取消掉,如果已取消可忽略。
    在这里插入图片描述

    3.添加背景图片

    将白色background-color:#fff;替换为照片:

    body {
        margin:0;
        font-size:14px;
        font-family:Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
        line-height:1.5;
        color:#333;
        /* background-color:#fff; */
        min-height:100%;
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
        url('https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/00/ChMkJlbKw6KIXhXnAA4L-_oxRzUAALG6QBUSg8ADgwT181.jpg') no-repeat 0% 0%/ cover;
    }
    
    /* 手机端换用一张背景图片,可以不使用 */
    @media screen and (max-width:800px) {
        body {
    		background: url('https://oss.yansheng.xyz/your-name-phone2ys.jpg') no-repeat fixed top;
        }
    

    效果:

    file

    4.微调

    4.1调整评论区背景

    原来为白色,现在改为透明。

    file
    先将之前定义在H:\Hexo\themes\yilia\layout\_partial\article.ejs的样式统一放到H:\Hexo\themes\yilia\source\main.0cf68a.css,如下git diff

     <!-- 《valine评论 -->
     <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
         <section id="comments" class="comments">
    -      <style>
    -        .comments{margin:30px;padding:10px;background:#fff}
    -        @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
    -      </style>
    +
           <%- partial('post/valine', {
             key: post.slug,
             title: post.title,
    

    在最后面添加:

    /* 《评论框 */
    .comments {
        margin:30px;
        padding:10px;
        /* background:#fff */
        background: rgba(255,255,255,.5);
    }
    @media screen and (max-width:800px) {
        .comments {
            margin:auto;
            padding:10px;
            /* background:#fff */
            background: rgba(255,255,255,.5);
        }
    }
    
    /* valine的背景颜色 */
    #vcomment{
    /* background:#fff */
        background: rgba(255,255,255,.9);
    }
    
    /* 设置valine占位符的颜色 */
    #vcomment :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #979292; 
    }
    #vcomment ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #979292;
    }
    #vcomment input:-ms-input-placeholder, #vcomment textarea:-ms-input-placeholder {
        color: #979292;
    }
    #vcomment input::-webkit-input-placeholder,#vcomment textarea::-webkit-input-placeholder {
        color: #979292;
    }
    /* 评论框》 */
    

    效果:

    file

    参考:html中怎么设定input的占位符字体颜色

    4.2调整归档背景

    之前调整的文章背景透明好像没有影响到这个:

    file

    进行调整:

    .archives-wrap {
        position:relative;
        margin:0 30px;
        padding-right:60px;
        border-bottom:1px solid #eee;
        /* background:#fff */
        background: rgba(255,255,255,.5);
    }
    

    调整日期颜色

    .article-meta time {
        /* color:#aaa */
        color: #2f2d2a;
    }
    

    日期时间大小

    .archive-article-inner .article-meta .archive-article-date {
        cursor:default;
        font-size:15px;
        margin-bottom:5px;
        margin-top:-10px;
        margin-right:0
    }
    

    微调归档页面的标题样式:

    /* 丢弃之前的 */
    .archives .archive-article-title {
        font-size: 16px;
        color: #333;
        transition: color .3s
    }
    /* 修改: */
    /* 分类页面的标题 */
    .archives .archive-article-title {
        font-size:20px;
        /* color:#333; */
        transition:color .3s
    }
    .archives .archive-article-title:hover {
        /* color:#657b83 */
    }
    

    因为将右边栏的超链接都统一进行了设置,如果不需要特效,可以通过下面的代码取消超链接的下划线样式:

     a.share-outer:hover::after {
        transform: scaleX(0);
    }
    

    4.3主页的文章块的日期取消超链接样式

    日期和文章统计数样式

    原:

    .archive-article-date {
        color:#999;
        margin-right:7.6923%;
        float:right
    }
    

    修改后:

    /* 日期栏(如果是文章还包含卜算子的页面访问量) */
    .archive-article-date {
        /* color:#0087ca; */
        color:#4b4949;
        margin-right:7.6923%;
        float:right
    }
    /* 日期 */
    .archive-article-date time{
        color:#4b4949;
    }
    /* 日期同一行的文章阅读数量 */
    .archive-article-date[id=busuanzi_container_page_pv] {
        color:#4b4949;
    }
    

    主页的“展开全文”按钮样式:受全局超链接样式影响,悬浮后,会变成红色。处理:提前加一个悬浮,掩盖全局的:

    /* 防止鼠标悬浮时,变色,因为会被全局的超链接样式影响 */
     .article-more-link a:hover{
        color:#fff;
    }
    

    前一页后一页:去掉悬浮的样式,可以直接注释掉:

    #article-nav .article-nav-link-wrap:hover .article-nav-title, #article-nav .article-nav-link-wrap:hover i {
        /* color:#4d4d4d */
    }
    
    

    标签按钮:受全局超链接样式影响,悬浮后,会变成红色。处理:提前加一个悬浮,掩盖全局的:

     .tagcloud a:hover {
    +    color:#fff;^M
         opacity:.8
     }
    
    

    4.4手机端头部背景颜色

    H:\Hexo\themes\yilia\layout\_partial\mobile-nav.ejs取消内嵌样式,在全局css中进行设置:

      <!--	<div class="overlay js-overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"></div>-->
      	<div class="overlay js-overlay"></div>
    
    

    H:\Hexo\themes\yilia\source\main.0cf68a.css设置成渐变:

        #mobile-nav .overlay {
            height:110px;
            position:absolute;
            width:100%;
            z-index:2;
             /* 渐变:浅绿色变淡蓝色 */
            background-image: linear-gradient(#8fecc5,#0badf7);
            /* 浏览器不支持渐变时显示默认颜色 */
            background-color: #4d4d4d;
        }
    
    

    效果图:

    file

    4.5鼠标图片

    去网上找一种鼠标指针的图片,用图片替换默认的鼠标样式:cursor:url('url'), default;,default表示:如果图片不起效,就是用默认的。

    body {
        margin:0;
        font-size:14px;
        font-family:Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
        line-height:1.5;
        color:#333;
        /* background-color:#fff; */
        min-height:100%;
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
            url('https://oss.yansheng.xyz/wallpaper/qinshimingyue.jpg') no-repeat 0% 0%/ cover;
        cursor:url('https://oss.yansheng.xyz/ico/favicon-2019110906554413.ico'), default;
    }
    
    /* 因为超链接默认情况下是:cursor: pointer; 显示为手,这里进行设置 */
    a {
        cursor:url('https://oss.yansheng.xyz/ico/favicon-2019110906554413.ico'), default;
    }
    
    

    4.6行内代码、引用块的背景颜色

     .article-entry li code, .article-entry p code {
        color: #c7254e;
        /* background-color: #f9f2f4; */
        background-color: rgba(249, 242, 244, .7);
        border-radius: 2px;
        padding:2px 4px;
        margin:0 3px;
        /* background:#ddd; */
        /* border:2px solid #ccc; */
        font-family:Menlo, Monaco, Andale Mono, lucida console, Courier New, monospace;
        word-wrap:break-word;
        /* font-size:14px */
    }
    .article-entry blockquote {
        background:#ddd;
        border-left:5px solid #ccc;
        padding:15px 20px;
        margin-top:10px;
        border-left:5px solid #657b83;
        /* background:#f6f6f6; */
        background: rgba(246, 246, 246, .7);
        /* 如果超长,自动截断 */
        word-wrap:break-word;
        word-break:break-all;
    }
    
    

    文章首发于:hexo+yilia添加背景图片

    展开全文
  • Python+tkinter应用程序设置背景图片

    万次阅读 多人点赞 2019-12-04 22:54:25
    功能描述:设计tkinter应用程序,为窗口和组件设置背景图片。 参考代码: 运行效果: ---董付国老师Python系列图书--- 友情提示:不建议购买太多,最好先通过京东、当当、天猫查阅图书了解目录和侧重点,...
  • Html设置网页背景图片

    万次阅读 多人点赞 2015-11-29 21:17:48
    为网页添加背景图片可以衬托网页的显示效果,从而取得更好的视觉效果。背景图片的选择不仅要注意好看,而且还要注意不能喧宾夺主,影响网页内容的阅读。通常使用深色的背景图片配合浅色的文本,或者浅色的背景图片...
  • css如何设置背景图片?background属性添加背景图片

    万次阅读 多人点赞 2020-05-18 22:19:20
    本章就给大家介绍css怎样设置背景图片。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 更多相关视频: 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发:BV1C54y1X7ro 前端发展...
  • 更换背景图片(Android)

    热门讨论 2012-05-08 09:38:54
    简单的Android应用图片更换例子 --Harlan
  • jquery后台登录页面背景图片自动轮换登录界面代码
  • html背景图片自适应窗口大小

    万次阅读 多人点赞 2019-05-06 19:14:05
    会把图片拉伸至足够大,但是背景图片有些部分可能显示不全 #bgImg { height: 100%; width: 100%; background: url('../img/bg/snow.jpg') no-repeat; background-size: cover; position: absolu...
  • vscode 背景图片的设置

    千次阅读 2020-07-04 11:19:37
    "background-size": "100%,100%", "opacity": 0.2 // 设置背景图片并且设置透明度 结束 上述代码重要位置解说: “opacity” 重要参数设置透明度,如果不设置很遗憾,你的vs桌面只剩下图片了,代码神马的就不要...
  • Vue 设置背景图片样式

    千次阅读 2020-04-07 16:26:37
    Vue 设置背景图片样式CSS效果图 CSS <style> body{ background-image: url('./bg.jpg'); background-size: cover; background-position: center; font: 14px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\...
  • wordcloud:自定义背景图片,生成词云

    万次阅读 多人点赞 2017-09-01 08:31:46
    mask=backgroud_Image,# 设置背景图片 font_path='C:\Windows\Fonts\STZHONGS.TTF', # 若是有中文的话,这句代码必须添加,不然会出现方框,不出现汉字 max_words=2000, # 设置最大现实的字数 stopwords=...
  • Eclipse:更换背景图片

    千次阅读 多人点赞 2019-11-10 19:07:04
    放置你的背景图片 到了最舒服的时候啦,首先打开刚才找到的 images 文件夹,然后不用我多说了吧,看下图: 这里就是存放你背景图片的地方,把你喜欢的背景图片拷贝过来,不过要注意几点: 1) 图片的文件名要和你...
  • 设置PyCharm背景图片

    千次阅读 多人点赞 2020-04-13 15:52:35
    更换PyCharm背景,换个背景,换个心情写代码,每天都有好心情。
  • css设置背景图片大小Introduction: 介绍: As we all know that the images are a very responsive yet very creative way to display your web page or website to the users. The images also play a major role...
  • app引导页(背景图片切换加各个页面动画效果)

    千次下载 热门讨论 2015-08-27 23:44:38
    博客地址:http://blog.csdn.net/lowprofile_coding/article/details/48037095
  • javafx设置背景图片

    千次阅读 2020-11-22 10:43:08
    javafx设置背景图片 使用css setstyle方式 但使用IntelliJ IDEA时,在写路径时会提示错误,但实际上是可以不管的 路径写项目的工作目录的相对路径即可 项目的路径如下: ├── pom.xml ├── src │ ├── data │ ...
  • css背景图片的设置

    万次阅读 多人点赞 2018-03-30 10:57:32
    转自:http://www.360doc.com/content/18/0330/10/54030484_741477948.shtmlcss2 中的背景(background)概述CSS2 中有5个主要的背景(background)属性,...* background-image: 引用图片作为背景。* background-posi...
  • 图片 作为背景 使用 background-image:url(image path) 示例如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=...
  • HTML设置背景颜色及背景图片

    千次阅读 2020-08-26 23:17:27
    - 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色 - 如果背景的图片小于元素,则背景图片会自动在元素中平铺将元素铺满 - 如果背景的图片大于元素,将会一个部分背景无法完全显示 - 如果背景...
  • pycharm背景图片的设置

    千次阅读 2019-11-19 10:31:18
    以下为pycharm2018的显示,2019版本稍有不同 在使用pycharm的时候...我们今天来共享一下设置pycharm背景图片的方法。步骤如下 1 打开背景设置窗口 方法1: 连按两次shift弹出如下的框,输入set background...
  • 将idea 代码编辑页面的背景进行了更改 步骤: 如果你的IDEA是比较新的版本,那么自带就有这个功能。 首先,进入IDEA,依次打开 File->Settings->Keymap 搜索Set Background Image ,看是否存在 如果...
  • echarts设置背景图片

    万次阅读 2019-08-20 16:37:29
    echarts设置背景图片的两种方法 方法一 var img = new Image(); img.src = ’ 图片的url’ img.width = ‘100%’ img.height =‘100%’ 在option中引用: option = { backgroundcolor:{ image:img } } 方法二 在div...
  • css 背景图片自适应属性整理

    万次阅读 多人点赞 2019-06-25 19:36:42
    本篇博客主要记录一些使用 css 对背景图片自适应的操作整合 背景图片取消重复 background-image: url(image.jpg); background-repeat:no-repeat; 修改前 修改后 背景图片固定(不会随着内容滚动而改变位置) ...
  • Android 动态设置程序activity背景图片源码
  • css3 实现背景渐变色与背景图片并存效果 先看效果 背景是渐变色+浅色透明图案组成,UI没有完全切成一张图,刚好试试看能不能背景渐变+图片的效果。 对兼容性要求高的不要这样做,直接叫UI切合成一张完整的背景图 ...
  • Qt设置按钮背景图片

    千次阅读 2020-01-01 02:32:34
    用qss可以修改按钮的样式,但是一些复杂的图形用图片来做显示效果更好,下面给出Qt按钮添加图片的方法,直接用setIcon的方法,图片会被缩放,下面的方法正常显示 //设置按钮图标,按钮的默认大小是 30*30,可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 547,564
精华内容 219,025
关键字:

背景图片